[TIL_포켓몬 도감_트러블슈팅(2)] 2/4
1. react에서는 100% -> vh, vw!
height 100%, width 100%;
을 했는데도 아무 변화가 없어서 뭐지 했는데
react에서는 view port 즉 현재 실행중인 스크린 크기에 맞워서 상대적 크기를 반환해주는
vh(viewport height), vw(viewportwidth)를 쓴다고 한다
2. query String
id를 사용해서 구현하다가 처음 query String을 써봤는데 사용이 익숙치 않아 조금 어려웠다
쿼리 파라미터는 /뒤에 ?가 나오는 부분부터 시작이고, key=value 형태로 이루어져 있다
나는 id 값을 넘겨줄 것이기 때문에 id=${pokemon.id}로 해줬다
const [searchParams] = useSearchParams(); 을 통해 useState 사용하는 것처럼 사용할 수 있고,
set을 해주지 않을거라 set부분은 삭제하고 사용했다
3. 구현이 어려웡
나의 포켓몬 덱스에 카드를 추가하지 않았을 때는 포켓몬볼이 나오고 추가하면 카드로 바뀌어야 하는데 어떻게 바꿀지 생각이 나지 않았다
튜터님의 팁을 받아 성공했다
남들은 어떻게 구현했을지 궁금해지는 부분이긴한데
나는 해당 배열을 가져와서 카드인 값만 필터한뒤, 카드를 추가하고, 남은 곳은(6개가 보여져야 하니) 포켓몬볼을 푸쉬해서 배열을 채워줬다
이번 과제는 프롭드릴링으로 구현하고, 전역 컨텍스트로도, 리덕스로도 구현을 해야 하는데 내일 실시간 강의를 듣고 전역 컨텍스트로 넘어가라고 하셨으니 그 전 단계는 이제 완성한 듯하다
이전 입문주차 과제를 통해 연습해서 그런지 생각보다는 원활하게 과제를 해나가고 있어서 뿌듯하고 기분이 좋다