[react/실습] 포켓몬 도감 사이트

'포켓몬 도감 사이트 만들기'로 상태 관리 연습하기

GitHub 바로가기

포켓몬 도감 사이트 바로가기

트러블 슈팅

 

 

---

       실습 내용 

세가지 방식(props-drilling, contextAPI, RTK)으로 만든, 다양한 포켓몬을 확인할 수 있는 포켓몬 도감 사이트이다.

모달을 통해 포켓몬의 자세한 정보를 확인할 수 있고, 원하는 포켓몬을 잡거나 놓아줄 수 있다.

• 포켓몬을 눌러 포켓몬 상세 정보 확인
• 원하는 포켓몬 '잡기' 버튼을 클릭하여 대쉬보드에 포켓몬 추가
• 잡은 포켓몬을 클릭하여 포켓몬 놓아주기

 

헷갈렷던 세가지 방식 모두를 써볼 수 있어서 좋았고, 역시 props-drilling은 복잡하고 싫다 !

 

 

---

       컴포넌트 구성 

App
├── Home
├── Dex
│   ├── DashBoard
│   ├── Popup
│   ├── PokemonList
│   │   └── PokemonCard
└── Components
    └── AddBtn  # 리스트, 카드, 팝업에서 사용됨

 

 

---

       기능 설명 

홈페이지에서 시작하기를 누르면 상단에 있는 이미지인 Dex 페이지로 이동한다.

 

포켓몬을 잡거나 놓아줄 수 있고,

이미 잡은 포켓몬이거나 슬롯이 다 찼을 때는 toast 팝업(라이브러리)을 사용하여 경고창이 뜨도록 해줬다.

 

 

---

props-drilling, contextAPI, RTK 등 너무 비슷한데 사용법도 다 달라서

상태를 관리하는 방법들이 익숙하지 않았었다.

하지만 이번 프로젝트를 기회로 제대로 연습한 것 같아서 럭키~!

완전히 내 것이 됐다고 말하긴 어렵지만... (아직 헷갈림....)

그래도 힌트 조금만 보면 바로 쓸 수는 있는 정도인 것 같아서 뿌듯하다 !

더 써보고 완전히 내 것으로 만들어야지 ~