01. 개발 환경 세팅

1. Vite 프로젝트 생성:

yarn create vite react-project

2. 프로젝트 디렉토리로 이동:

cd 프로젝트이름

3. React-Redux React-Router-DOM Redux Toolkit 설치:

yarn add react-router-dom
yarn add react-redux @reduxjs/toolkit

4. (필요 시) ui styling 설치:

yarn add styled-components
yarn add lucide-react
yarn add @mui/material @emotion/react @emotion/styled

5. 의존성 설치, 개발 서버 실행:

yarn
yarn dev

→ Vite 기반의 React 프로젝트에서 Redux를 사용하여 상태 관리 가능.

---

02.React Router 설정하기

// ./shared/Router.jsx

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<StartPage />} />
        <Route path="/home" element={<HomePage />} />
        <Route path="/:id" element={<DetailPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Router로
./pages/Start.jsx
./pages/Home.jsx
./pages/Detail.jsx
불러옴

---

03. 기능 컴포넌트

contextAPI로 리팩터링한
./components/PocketmonContext.jsx
./context/PocketmonImage.jsx
(RTK는 너무 어려워서 패스 🤦‍♀️)

PocketmonContext.jsx

포켓몬 데이터를 관리할 PocketmonContext를 생성하고, 이를 제공할 PocketmonProvider를 설정합니다. (App.jsx에서 사용)

PocketmonImage.jsx

포켓몬 목록을 렌더링하는 컴포넌트입니다. props drilling: HomePage에서 ids props를 받아 포켓몬 데이터를 가져오고, 해당 데이터를 하위 컴포넌트에 전달합니다. 데이터 분리: 선택된 포켓몬(isSelectList)과 선택되지 않은 포켓몬(selectList)을 분리하여 렌더링합니다.

---

04.