React - Vite를 사용한 React 앱 개발

React 앱 생성부터 상태 관리

1. Vite로 React 프로젝트 만들기

npm create vite my-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript

cd my-app
npm install
npm run dev

※ http://localhost:5173에서 브라우저로 바로 확인 가능

2. Vite 프로젝트 구조 요약

my-app/
├── index.html
├── package.json
├── vite.config.js
├── public/
├── src/
│   ├── App.jsx
│   └── main.jsx

※ React 컴포넌트는 src 폴더에서 작성됨

3. 함수형 컴포넌트와 useState

function MyButton() {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        "button",
        { onClick: () => setIsClicked(!isClicked) },
        isClicked ? "클릭되었습니다." : "클릭해 주세요."
    );
}

※ useState는 컴포넌트 내부에서 상태(state)를 관리할 수 있게 해주는 Hook

상태 변화 흐름

• 초기 상태: isClicked = false → "클릭해 주세요."
• 첫 클릭: setIsClicked(true) 실행 → 다음 렌더링에서 "클릭되었습니다."
• 두 번째 클릭: setIsClicked(false) → 다시 "클릭해 주세요."

※ 상태 변경은 즉시 화면에 반영되지 않고, 다음 렌더링에서 반영