# prop-types 인자의 타입값을 정하는 prop-types는 라이브러리로 따로 빠졌다고 하기 때문에 설치를 진행해야 한다. npm i prop-types 터미널에 위의 명령어를 입력한다. powershell에 입력할 경우 오류가 뜨며 설치가 안될 수 있으니 bash로 바꾼 뒤 설치하는 것을 추천한다. 혹시라도 안될 경우 아래 방법으로 해보는 것도 추천 npm install --global yarn yarn add prop-types # react CSS 외부 css파일을 생성하여 import하는 방법 *Button.module.css .title {color: #fff; background: tomato;} *App.module.css .title {font-size:18px;} *App.js i..

# create-react-app CLI(커맨드 라인 인터페이스). 리액트를 사용하기 위해 필요한 환경을 한번에 조성해주는 인터페이스. # create-react-app 사용하기 1. node js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 운영체제에 맞는 node.js를 설치 제대로 설치됐는지 확인하려면 터미널에 아래 명령어를 입력한다. node -v 정상적으로 설치가 되었다면 node.js의 버전이 출력된다 create-react-app을 사용하기 위해서는 node.js의 npx라는 커맨드를 사용하기 때문에 npx도 터미널에 입력해서 ..

PropTypes : 각 컴포넌트의 인자값의 속성을 체크 (*주의 : 일반 production으로는 propTypes를 인식할 수 없으므로 development로 사용해야 함) 위의 내용대로면 컴포넌트 Btn의 인자값 text는 문자, fontSize는 숫자가 적용되어야 한다. 하지만 두번째 Btn의 text는 숫자, fontSize는 문자가 들어가있고 이는 문법상으로는 오류가 아니라 출력은 되지만 propTypes에 의해 콘솔창에 오류가 뜬다. function App(){ return( ); }; 지정한 타입으로 수정하면 오류는 사라진다. 필수로 입력되어야 하는 인자값을 지정하고 싶은 경우에도 propTypes를 사용할 수 있다. 만약, text와 fontSize가 필수 인자값으로 들어가야 한다면 is..

컴포넌트 안에 작성되는 내용들은 모두 프로퍼티(props) 이다. 이벤트리스너의 이름을 갖고있어도 컴포넌트 안에 작성되면 프로퍼티로 적용된다. 컴포넌트 안에 작성한 프로퍼티는 함수의 인자값으로 넣어주어야 사용할 수 있다. React.memo는 컴포넌트의 내용이 수정되지 않으면 랜더링 하지 않게 해준다.

#컴포넌트 인자값 받기 각각의 컴포넌트는 인자값을 전달할 수 있다. 전달 된 인자값은 출력 텍스트, 함수 등에 다양하게 쓰일 수 있다. -출력물

# 컴포넌트 나누기 및 불러오기 select박스를 사용하여 원하는 컴포넌트를 가져오는 방법. MinutesToHours와 KmToMeter라는 컴포넌트의 내용이 있다는 가정 하에, select로 선택된 옵션의 value값을 기준으로 원하는 컴포넌트를 그려냄 # KmToMeter 강의에서는 useState는 위 내용까지이고 Km↔mile 변환 함수를 작성해 보는 것을 권하고 있다. 나는 마일 대신 미터로 변환 함수를 작성했다.