🥲 리액트 왜 쓰나요?
1. 웹사이트 페이지 이동, 변경 등이 매우 스무스하게 변합니다.
2. index.html 하나로 화면 내부가 변경됨!
3. fetch로 데이터 가져오고 innerHTML 했던 거랑 비슷합니다!
4. 데이터가 변하면 화면을 다시 그려주는 걸 “리액트”는 알아서 해줍니다.create react app (CRA) 설치하기
- 리액트 사용할 때 CRA 설치 안해도 됩니다.
- 하지만 CRA를 사용하면 전체적으로 구조를 잡아줘서 사용하기 편합니다.
📄 설치하는 법
- 프로젝트 폴더 하나 만들기
- 터미널에서
npx create-react-app 프로젝트명 - react 파일 생성
cd 프로젝트명 - 해당 파일로 이동
npm start - react 실행🤔 리액트 구조
- public/index.html
- 화면에 보여지는 html 페이지입니다.
- 여기다 코드 짜는 건 아닙니다.
1-2. public 폴더 용도
- 이미지 저장하는 곳입니다.
- 나중에 이미지 저장하려면 여기다 넣으면 됩니다.
- src/index.js
- ndex.html의 id가 root인 곳에 나머지 html 넣어주는 겁니다.
- → 여기 안에서 코드 짜는 겁니다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);- src/App.js
- 실제로 코드 짜는곳.
- 터미널 열어서 npm start 라는 명령어를 통해 실행하면 보여지는 실제 페이지입니다.
npm start- node_modules
- 리액트가 잘 돌아갈 수 있게 엄청나게 많은 코드가 있습니다
- 압축 파일이라 봐도 알 수 없습니다.
- 이 파일은 github에 올리지 않도록 합니다. 파일 크기가 너무 커서 그렇습니다.
- 어차피 package.json 있으면 나중에 설치할 수 있습니다.
- 한 번 삭제해보세요. → 코드 동작 안합니다.
- npm install 하면 다시 생깁니다.
- package.json
- dependencies 에 설치해야 할 파일들이 있습니다
- npm install하면 이거 보고 알아서 설치해줍니다.
- 그래서 여기에 있는 dependencies는 함부로 지우거나 추가하지 않도록 하세요. 개발 잘하게 되면 하세요
- 테스트로 하나 설치해보면 여기에 추가됩니다.
- react-icons 설치해보기
- package-lock.json
- package.json에서 ^ 요런 거 있으면 정확한 버전이 아니라 비슷한 버전인데 최신 버전 깔아줍니다.
- 근데 팀원들끼리 버전 다르면 문제 생길 수도 있습니다. (보통 버전 큰 차이 안나서 문제는 없는데 “그럴 수도” 있다는 겁니다.)
- 그래서 정확한 버전 기록되어있는 게 여기입니다.
- 삭제하고 npm install하면 다시 생깁니다.
- 삭제해도 상관없지만 이왕이면 삭제하지 않고 팀원들끼리 함께 쓰면 좋습니다.
- npm start는 뭔가요?
- package.json에 scripts라는 게 있습니다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},- 여기서 명령어 입력을 쉽게 할 수 있게 도와줍니다.
- 긴 명령어를 짧게 쳐서 명령어가 실행하게 합니다.
- npm run build 도 해보세요. dist 혹은 build라는 폴더가 생길 겁니다. ⇒ 얘는 나중에 배포할 때 많이 씁니다.
응애