React 프로젝트 생성 및 구조

React프로젝트 생성 방법에는 CRA와 Vite가 있다

다만 CRA보다 Vite가 속도 및 편의성등 여러가지 면에서 더 좋기에 Vite를 사용하는 방법만 설명한다

Vite : CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구

터미널을 열고 원하는 경로에서 아래의 내용을 입력

yarn create vite 프로젝트이름지정 --template react

위의 작업이 완료됐다면 만들어진 프로젝트 경로로 이동하기 ( cd )

yarn 입력 = vite프로젝트에 필요한 패키지들을 설치하는 명령어

yarn dev 입력 = 프로젝트 실행 (mac기준 로컬링크를 cmd+클릭으로 바로 이동가능)

---

소스코드의 흐름 확인

SPA(Single Page Application)에는 html 파일이 한 개만 존재한다

index.html파일을 보면 아래의 코드를 확인할 수 있는데

<script type="module" src="/src/main.jsx"></script>

위의 코드를 통해, main.jsx 파일로부터 CSR 방식으로 UI를 구성/변경한다.

또한 main.jsx 파일에서는 App.jsx 파일을 import하여 사용하고 있다.

import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)