[본 캠프 31일차] 개인 과제 제출 + 과제 해설

1. 프로젝트 셋업 skip

2. React router dom 및 styled-component 셋업 + 기본 라우팅 시스템 적용

• yarn add react-router-dom
• import { BrowserRouter, Routes, Route } from 'react-router-dom'
  - BrowserRouter 로 Routes 와 Route 를 감싼다
  - Route path="/" elements={<Home /> /}
  - Route path="/dex" elements={<Dex  /> /}
• Home 에서 Dex 로 이동하는 버튼 만들기
  - useNavigate 를 import 하고 onClick={()=> navigate("/dex")} 로 이동

3. Dashboard 컴포넌트 구현

• Dashboard.jsx 와 PokemonList.jsx 컴포넌트 생성
• 기본 예시 코드 가져와서 붙혀넣고 Dashboard 

4. PokemonList, PokemonCard 구현

• Dex 페이지에 mock 데이터 가져오기
• PokemonList 컴포넌트에서 map 으로 PokemonCard 를 뿌려주려면 PokemonCard 컴포넌트 생성
• PokemonCard 에서 출력될 내용들을 순서대로 깔아주기. img_url, korean_name, description 등
• PokemonCard 에서 만든 내용들을 PokemonList 에 넣어주기 map 으로 넣기로 했으니까
  밑에 key 로 id 먼저 설정해주고, pokemon은 pokemon

5. Dashboard 로 포켓몬 추가하기 로직

• Dex 페이지에 addPokemon 함수 만들기 
  - selectedPokemon 에 포켓몬이 없는 경우에만 포켓몬이 추가가 되어야 하니 조건문으로
    selectedPokemon을 some 이나 includes 로 순회하여 지금 추가할 pokemon 이 있으면 alert 로
    이미 선택된 포켓몬이 있다고 띄워주고 없다면 setSelectedPokemon 으로 ...selectedPokemon, pokemon 추가

6. 대시보드에서 선택된 포켓몬 삭제하기 로직

 

7. 디테일 페이지 연결

 

8. ContextAPI 를 이용한 리팩토링

 

시간 부족해서 못함..