오늘 한 일

이미지 캐러셀에 데이터 연결하기
장소 상세정보 가져오기

오늘 공부한 것

✅ queryKey

• TanStack Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리
• 쿼리키는 반드시 배열이어야 함 (v4 기준)
  (단일 문자열처럼 간단할 수도 있고 여러 문자열 및 중첩 배열이 될 수도 있음)
  (추가 적인 정보가 필요하면 배열 안에 작성할 수 있음)
• 고유한 키여야 하고 직렬화 하여 사용해야 함

해결한 문제

✅ 문제상황

• useParams 로 주소값(placeId)을 읽어와야 되는 상황인데 새로고침을 하면
  계속 undefined 이 되어 렌더링 과정에서 오류가 났다

시도 1

useRouter의 router.query.placeId로 읽어와도 똑같은 문제!
하지만 next에서는 useParams 보다 useRouter를 쓰는 것이 좋다고 하셔서
useRouter 는 그대로 뒀음!

시도 2 - 해결!

쿼리 키에 추가 정보를 담아서 요청!
쿼리키에 기본 키와 추가적인 정보(placeId)를 함께 담으면
추가정보의 값이 변하면 다시 데이터를 요청한다!

그래서 처음 페이지가 렌더링 될 때 undefined 였던 placeId에
제대로 된 정보가 들어오면 다시 데이터를 요청하기 때문에
렌더링 오류가 없어짐!

// 기존코드
  const { data: reviews, isLoading: reviewLoading } = useQuery({
    queryKey: ['reviews'],
    queryFn: () => getReviewByPlaceId(placeId),
  });

// 바꾼 코드
  const { data: reviews, isLoading: reviewLoading } = useQuery({
    queryKey: ['reviews', placeId],
    queryFn: () => getReviewByPlaceId(placeId),
  });

느낀 점

프로젝트를 진행할 수록 끝판왕은 타입스크립트라는 것을 느낌...
타입에러.. 미치겠다 🤪