1. 리액트 개념
- 복잡한 html문서를 component(사용자정의 태그)로 분리. UI제작을 위한 JS라이브러리.
<body>
<Top></Top>
<Sidebar></Sidebar>
<body>2. 리액트를 사용하는 이유
- 가독성(컴포넌트로 분리)
- 재사용성(컴포넌트만 복붙)
- 유지보수(컴포넌트만 수정)
3. CRA설치
- 글로벌 환경에 설치(m1맥 안되서 2번으로 함 ㅠ)
npm install create-react-app
or
sudo npm install create-react-app - CRA사용할 프로젝트 디렉토리에 설치
npx create-react-app "디렉토리명"
4. 샘플앱 실행
터미널에서
npm start명령어로 실행
ctrl + c로 종료
5. render되는 과정(JS)
- public과 src디렉토리로 나뉨
npm start하면 index.html파일이 보임- public속 index.html을 보면
<div id="root"></div>가 있음. 여기에 컴포넌트들이 들어가게 돼있음. - 진입파일은 index.js임.
ReactDom.render(<App />, document.getElementById('root'));로 App 컴포넌트를 불러옴
6. CSS링크하기
import './App.css';
7. 배포하기
npm run build하면 build 디렉토리가 생기고 안에 index.html이 있음. 프로덕션 환경에서 보이는 불필요한 파일이 제거된 것임.- 실제 서비스할때 build속 파일을 사용함. 실서버에 build속 파일을 넣어주면 됨.
npm install -g serve또는npx serve -s build하면 간단한 로컬서버를 사용해서 배포결과를 볼 수 있음(network pannel에서 개발환경에서 보다 용량이 작다는 것을 확인할 수 있음)
Advanced thinking should be put into advanced code.