[25.02.05 수요일] : 포켓몬dex - 트러블슈팅
개인과제 3일차!!
어제 2단 변신 중 베이스를 마무리 한 줄 알았는데...하나를 빼먹었네? 추가해야지~ 하고 시작했는데....
아니... 왜.. 안됨!?
아니... 왜 작동되던 녀석도 안됨!?
아니... 새로 구현한 녀석 너만 안되면 안 되니!?
아니~이~!!!!💢
1. 문제 발생
포켓몬 카드를 선택하면 상세페이지로 넘어가게 되는데, 상세페이지에서도 포켓몬을 내 포켓몬에 추가하거나 삭제하는 버튼을 넣어줬다.
| Dex.jsx | Detail.jsx |
|---|---|
 여기서도 포켓몬 추가, 삭제가 가능하고! |  여기서도 추가, 삭제가 가능하도록! |
그.런.데. 버튼은 들어가 있지만 기능이 작동하지 않았다...
Dex.jsx에 있던 버튼은 잘 작동하였으나, Detail.jsx에 있는 버튼이 정상작동하지 않았다.
그래서 조건, props 등을 확인하며 다시 수정!!
그래도 안되는데...난..무슨짓을 한 것인가?
2. 원인 추론
<나만의 포켓몬 - 카드>에 있는 버튼도,
<포켓몬 목록 - 카드>에 있는 버튼도,
<포켓몬 상세페이지>에 있는 버튼도
모두 1개의 버튼에서 추가(add)로직, 삭제(remove)로직을 조건에 맞춰서 사용하고 있는 중이다.
가장 유력한 원인은 props를 전달하고 전달하고 전달하고... 하다 보니 분명 어디선가 꼬인 것이고, 그러면서 로직에서 몇 가지 수정 사항도 있었다.
props를 계속 전달하다 보니 헷갈려서 로직에서도 뭔가를 착각한 것 같은 느낌이 강하게 들었다.
3. 해결방안
🪄 props 정리
지금 작업 중인 깃허브 브랜치 이름이 'props-drillig'이다.
분명 작업하다 어디선가 props를 잘못 전달하거나 못 받아온 것이다.
코드에디터에서만 확인을 하니 혼동이 생기고 정리가 안됐다.
그렇다면! 시각화!
각 페이지/컴포넌트 별로 필요한 props만 정리하고 나니 또 한 가지 원인이 보였다.
🪄 props 공통 부모를 찾아라!
작업할 때 내 로직은 모두 Dex.jsx 페이지에서부터 시작을 했다.
그렇다면 내려줄 수 있는 자식 컴포넌트는 <Dash.jsx, List.jsx, Card.jsx>까지 인 것이다.
Detail.jsx는 Card컴포넌트를 누르면 보이는 화면이기 때문에 Dex의 하위 컴포넌트가 아닌 것이다. 즉, props를 전달할 수 없는 것이다.
그렇다면 props를 내려줄 수 있도록 Dex와 Detail의 공통 부모를 찾아 올라가자!!
그랬더니 Router.jsx가 나왔다. 여기서는 라우터 설정만 해주고 끝냈는데, 지금보 니 상태 관리부터 모든 로직이 여기서부터 시작을 했어야 했던 것이다.
과제 발제 페이지에서 추가 기능 구현 부분을 제대로 확인하지 않았던 결과🥲
props-drilling을 제대로 경험하고 말았다🫠
4. 결과
상위 컴포넌트에서부터 필요한 props를 정리해서 전달, 전달, 전달, 전달해 주니 정상적으로 잘 작동한다!
컴포넌트 관계와 props를 정리하고 나니 일부 수정했던 로직에서 필요한 부분도 다시 채워 넣었다.
정상적으로 잘 작동하는 것을 확인 한 후에, 바로 context API로 리팩토링진행!
 |  |
|---|---|
| import useEffect 하면 해결 | import useState 하면 해결 |
와.. props 정리를 제대로 해두니 context API로 리팩토링할 땐 거의 10분 컷으로 해결...
극과 극, 천국과 지옥을 체험해버렸다. 😳
기록
다른 팀원은 context API 리팩토링하면서도 오류가 발생해서 시간이 오래 걸렸다고 했는데, props 정리를 잘 해둬서 금방 끝난 것인가?
너무 쉽게 마무리가 되어서 "이게 되네?", "이게 맞아?", "찜찜하네" 하면서 튜터님 확인 방문까지 했다. 물론 다른 부분들도 확인하고 질문도 하면서 겸사겸사 방문한 것이지만..
스탠다드반 수업에서 튜터님이 설명을 정말 잘 해주셔서, 실제 코딩을 진행할 때 그 부분만 다시 확인하고 작업할 수 있었다. 어제 특강도 있었고, 반복을 이만큼 하다 보니 그만큼 결과가 나온 것 같다고 생각한다.
“이거 쉬워요, 정말 쉬우니까 여기서 고생하지 말고 스무스하게 가세요~” 하는 튜터님의 무언의 메시지랄까... 튜터님들이 정말 많이 고민하고 애써주신다는 것이 느껴졌다.
