9/10 React Query,SWR 프로바이더, 동적 라우팅에서 params, 쿼리스트링 추출

낄낄박사·2024년 9월 10일

Gotcha

목록 보기
20/22

React Query,SWR 프로바이더

React Query와 SWR을 사용할 때, 프로바이더로 감싸는 컴포넌트 자체는 클라이언트 - 컴포넌트일 필요는 없지만 실제로 useQuery나 SWR의 useSWR을 호출하는 컴포넌트가 클라이언트 컴포넌트여야 함. 이 둘은 클라이언트 측에서 비동기 데이터를 페칭하고 캐싱하는 역할을 하기 때문에, 이를 호출하는 컴포넌트가 클라이언트에서 실행되어야만 제대로 작동함. 프로바이더 사용은 클라이언트 컴포넌트든 서버 컴포넌트든 어디서든 가능.

동적 라우팅에서 params 사용

동적 라우팅을 통한 값 추출

  • Next.js에서 동적 경로를 사용하면 URL의 특정 부분을 params를 통해 추출할 수 있다.

  • 파일 구조가 /pages/category/[slug].tsx와 같은 형태일 때, URL의 /category/electronics에서 slug 값을 추출하여 사용할 수 있다.

  • { params }: { params: { slug: string } } 형태를 사용하여 slug 값을 추출

  • 이 params는 동적 경로에서만 값을 추출하고, 쿼리스트링을 통해 전달되는 값은 추출하지 않는다. 쿼리스트링을 추출하기 위해서 useSearchParams훅을 사용함

0개의 댓글