SPA (single page application)
- main page(header, main component, footer)
- sub page(header, sub component, footer)
- detail page(header, detail component, footer)
=> Route 필요
Virtual DOM
- 업데이트 된 부분만 component 가져와서 redering => routing이라 함
* 방법
1. TERMINAL 접속
2. npm init react-app test(파일명)
(설치하는 방법은 다양함)
- npx create-react-app test
- npm i -g react-app test
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd test
npm start
=> 빠져나오려면 ctrl + c
3. 파일 살펴보기
- public: 정적폴더 (.dist와 같은 역할)
- 레거시 기능: 이제 곧 없어질 기능들 React.StrictMode가 걸러냄(index.js) => 이것 때문에 기능 구현이 안된다면 빼버려도 됨
4. src 파일 안에 Component 파일 만듦
5. MyComponent.js 작성하고 App.js에 연결해줌
SCSS
- npm i scss
- npm start
- npm i styled-components
- npm i -g node-sass
- Live Sass Compiler
'Skills > React' 카테고리의 다른 글
230112 React useEffect, useReduser (1) | 2023.01.12 |
---|---|
230106 React function, component (0) | 2023.01.06 |
230106 React Props, 비구조화 할당(구조분해 할당) (1) | 2023.01.06 |
230105 React syntax 실전 (2) | 2023.01.05 |
230105 React syntax (0) | 2023.01.05 |