Create React App으로 리액트 시작하기
React App
예전에는 리액트 앱을 처음 실행하기 위해서는 webpack이나 babel같은 것을 설정하기 위해서 많은 시간이 소비 됐다. 하지만 최근에는 create-react-app Command로 바로 시작할 수 있다. 이 create-react-app 명령어는 위 웹팩과 바벨 설정을 자동으로 해준다.
*Babel은 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜줌.
*webpack is a static module bunder for modern JS applications.
리액트 앱을 설치하고 싶은 Directory로 이동해서 터미널에 npm create-react app . 을 실행 시켜준다.
npx create-react-app .
NPM vs NPX
- NPM(Node Package Manager): 예전에는 npm을 통해서 리액트 앱을 설치 했었다. npm install ...
- npm install locality: Links created at the ./node_modules/.bin directory
- 일반적으로 로컬에 저장된다.
- So, 원래 create-react-app을 할 때, npm install -g create-react-app 이렇게 했었다. 리액트 앱을 global 디렉토리를 통해 global로 우리 컴퓨터에 다운받았다.
- 이제는 npx를 이용하여 그냥 이용. 즉 다운을 받지않고 create-react-app을 이용할 수 있음.
- npx가 npm registry에서 create-react-app을 찾아서(look up)다운로드 없이 실행 시켜준다.
- 그래서 Disk Space를 낭비하지 않을 수 있을 뿐더러 항상 최신 버전을 사용할 수 있다.
결론은 npx를 사용하면 리액트 앱을 global로 다운받지 않고도 create-react-app . 명령어를 통해 사용할 수 있다.
Create React App 구조
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, ohterwise Webpack won't see them
: 즉, src 디렉토리에 JS and CSS 파일들을 넣으면 된다. webpack은 이 곳에 있는 파일들만 보고 그 외에 폴더는 보지 않는다.
Only files inside public can be used from public/index.html
hoc - concreately a higher-order componet is a function that takes a component and returns a new component
App.js - React Router Dom
페이지간에 이동을 할 때 React Router Dom 을 사용한다. Dependency 다운로드!
npm install react-router-dom --save
React Router Dom 버전
실습을 진행하다가 오류가 계속 나서 알아보니 react-router-dom의 버전 업그레이드로 인한 것임을 알 수 있었다.
버전 5와 버전 6의 차이점
- Switch -> Routes
- exact를 더 이상 사용하지 않음
- componet 옵션이 element로 바뀜
