Next.js query 사용, 다른 페이지 정보 가져오기

조욱희·2024년 4월 12일

트러블 슈팅

목록 보기
1/1

[문제점]


등산을 주제로 한 프로젝트를 진행중,
목표:피드게시물의 타입이 MREVIEW(산게시물) TREVIEW(모임게시물)로 나뉘어져있는 상황에서 게시물의 타입을 알아내야하는 상황.
즉, 가져온 feedType값에 따라 서로 다른 api를 호출해야한다.

여러개의 피드 컴포넌트를 렌더링하는 페이지에서
피드 컴포넌트 내부에서 피드의 정보를 조회하는 api를 호출하여 피드의 타입을 알아내야 하는데, 그 호출을 하기 위해서는 api가 모여있는 페이지에서 호출을 하는 방식이기때문에 피드의 타입을 props로 내려줄수도 없는 형태였다.
그렇기 때문에 페이지 내부에서 feed Type을 알아내야하는 딜레마를 방법을 찾아 해결해야했다.

[해결 과정]

api 호출전의 피드컴포넌트에서는 피드의 타입을 알 수 없고,
피드 리스트가 모여있는 FeedPage에서는 피드의 타입을 알 수 있다는 점에서 착안하여 게시물을 클릭하면 그 정보를 router를 이용하여 data로 넘겨주는 방법이 있을까 궁금하여 구글링 해보았다.

구글링한 정보를 바탕으로 Link 컴포넌트의 query attribute를 추가하여
쿼리이름:쿼리값 형태로 data를 보내주기로 하였다.
<전체 리스트가 담겨있는 FeedPage

값을 사용해야하는 Feed 컴포넌트에서는
SearchParams.get()를 통해 피드의 타입을 가져오면 된다.

결론적으로 feedType 따라 다른 api를 호출할 수 있었다.

<참고자료>

profile
일단 해보는편

0개의 댓글