[TIL] 20240514 - React App 생성

react app 생성

---

🔎 NPM(Node Package Manager)
npm은 노드 패키지 관리자로, npm registry에서 패키지들을 가져와서 설치

🔎 NPX(Node Package eXecute)
npx는 패키지를 설치하지 않고, npm registry에서 원하는 패키지를 실행

🧊 vite

vite는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구

create-react-app은 javascript로 구성된 webpack을 사용하는데 속도가 느린 편이라 vite를 사용

npm init vite
project name: vite-project
Select a framework: > -Use arror-keys. Return to submit.
> Vanilla
> Vue
> React
> Preact
> Lit
> Svelte
> Others
Select a variant: > -Use arrow-keys. Return to submit.
> JavaScript
> TypeScript
> JavaScript + SWC
> TypeScript + SWC 

package.json dependencies 설치

npm i

프로젝트 실행

npm run dev

package.json > script > dev 이므로 npm run dev
만약 "dev" → "start" 이면, npm run start

src 내부 폴더구조

---

├─ src
├─ assets
├─ components 
├─ hooks
├─ store
├─ types
├─ App.css
├─ App.tsx
├─ index.css
├─ main.tsx
└─ vite-env.d.ts

🧊 store

부모 컴포넌트와 자녀 컴포넌트가 소통하기 위해 props 사용

⚠️ 앱이 커지게 되면, 모든 컴포넌트로 값을 props로 공유하려면 코드가 지저분해짐
→ 상태 관리 라이브러리 사용

💡 상태 관리 라이브러리

• Redux
• Mobx
• Zustand
• Recoil
• React
• Context

export

---

🧊 export

• export한 이름으로 import 해야 함
• 이름을 중괄호로 감싸주어야 함

Test.js

export function Test() {
  return (
    <h2>export</h2>
  )
}

App.js

import { Test } from "./Test.js";

function App() {
  return (
    <Test></Test>
  )
}

export default App;

🧊 export default

• 경로만 올바르면 export한 이름과 달라도 import 가능
• 이름을 중괄호로 감싸주지 않아도 됨

Test.js

export default function Test() {
  return (
    <h2>export default</h2>
  )
}

App.js

import TestDefault from "./Test.js";

function App() {
  return (
    <Test></Test>
  )
}

export default App;

SPA vs MPA

---

🧊 SPA

한 개의 페이지로 구성된 Application
웹 어플리케이션에 필요한 모든 정적 리소스를 처음 접근할 때 한번에 다운로드
→ 새로운 페이지 요청이 있을 때, 필요한 데이터만 전달 받아 갱신

🧊 MPA

여러 개의 페이지로 구성된 Application
새로운 페이지를 요청할 때마다 정적 리소스 다운로드
→ 매번 전체 페이지가 다시 렌더링됨