분류 전체보기142 [React] 5-0. Create React App 📌 Create React App 이전 시간까지는 script를 직접 import 함으로써 React App을 만들었었다. but, Create React App은 많은 script들과 많은 사전 설정들을 준비해 주기 때문에 사용하면 React App 개발이 더 편해진다. 예를 들면 개발 서버에 접근하거나, 자동으로 페이지 새로고침을 하거나, 즉각적으로 어플리케이션 안에 CSS를 포함시켜 주는 등의 다양한 기능이 존재한다. 명령 프롬프트에 다음과 같이 입력해 보자. node -vnode.js의 버전이 제대로 나오면 node.js가 제대로 설치되어 있는 것이다. npxnpx가 제대로 작동하는지 확인한다. 다음과 같은 형식으로 입력하면 C 드라이브의 사용자 폴더에 React App 폴더를 생성할 수 있다. .. 2023. 6. 2. [React] 4-2. Prop-Types 알아보기 📌 Props 더 살펴보기 버튼 안의 text를 바꾸는 ex) function Btn({ text }) { return ( {text} ); } function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Changes"); return ( // 주목! ); } 위에서 onClick은 이벤트 리스너가 아닌 Btn 컴포넌트로 들어가는 prop이다. 이벤트 리스너로서의 역할을 하기 위해서는 Btn과 같은 커스텀 컴포넌트가 아닌 HTML element에다 넣어야 한다. 즉, Btn에 onClick을 속성으로 적어준다고 해서 그 버튼을 클릭을 하면 changeVa.. 2023. 5. 31. [React] 4-1. Memo 알아보기 📌 Props 더 살펴보기 버튼 안의 text를 바꾸는 ex) function Btn({ text }) { return ( {text} ); } function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Changes"); return ( // 주목! ); } 위에서 onClick은 이벤트 리스너가 아닌 Btn 컴포넌트로 들어가는 prop이다. 이벤트 리스너로서의 역할을 하기 위해서는 Btn과 같은 커스텀 컴포넌트가 아닌 HTML element에다 넣어야 한다. 즉, Btn에 onClick을 속성으로 적어준다고 해서 그 버튼을 클릭을 하면 changeVa.. 2023. 5. 31. [React] 4-0. Props 알아보기 📌 Props 지금까지 우리는 부모 컴포넌트인 App과 그의 자식 컴포넌트들인 MinutesToHours과 KmToMiles을 이용하여 코드를 작성하였고, 부모 컴포넌트 App은 자식 컴포넌트들을 render하였다. ⭐ Props props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방법이다. props의 예시를 알아보기 위해 다음과 같이 코드를 초기화한다. props 예시) 1. SaveBtn 컴포넌트와 ComfirmBtn 컴포넌트를 만들어 주었고, 이것을 App 컴포넌트의 자식 컴포넌트로 넣어 화면에 render 시키는 코드를 작성한다. 컴포넌트: 어떤 JSX를 반환하는 함수 (or 클래스) // 함수형 컴포넌트 SaveBtn function SaveBtn() { re.. 2023. 5. 31. 이전 1 ··· 26 27 28 29 30 31 32 ··· 36 다음
