개발자

Nextjs 탭 기능 질문

2024년 06월 28일•조회 61

Next 14 앱라우터 버전과 react-query를 사용하고 있습니다. 게시물 목록을 보여주는 페이지를 만들고 있고 게시물의 카테고리를 필터링 해주는 탭을 만드려고 하는데요. 기존에 React에서 할땐 searchparams 값을 넘겨주는 식으로 필터링이 됐는데 next에서는 url을 바꾸는 식으로 하려면 페이지 이동을 해야 하는 것 같아서 이걸 페러렐 라우트로 처리를 해야할지 url 처리 없이 가야할지 고민이 됩니다 ㅠㅠ

nextjs14

approuter

reactquery

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

익명님의 질문

답변 1

14 이상 next를 쓰신다면 꼭 클라이언트 기능으로 원하는 기능을 구현할 필요는 없습니다. revalidate 함수와 함께 서버 액션으로 원하는 기능을 만드실 수 있습니다. 클라이언트쪽 API들을 사용하고 싶다면 리액트에서 하는 방식 그냥 똑같이 쓰셔도 됩니다. 별 차이 없습니다.

익명

작성자

2024년 06월 28일

상황에 맞게 어떤 것을 선택해도 괜찮다는 말씀이시죠?? 서버 액션해봐야겠네요! 감사합니다!

포크코딩

별빛상단 단주 • 2024년 06월 28일

넵 좋습니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

AI 답변

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 06월 28일

Next.js에서는 기본적으로 페이지 기반의 라우팅 시스템을 가지고 있습니다. 이 의미는, URL이 변경될 때마다 새로운 페이지 컴포넌트가 마운트된다는 것입니다. 따라서 카테고리를 필터링할 때 URL을 변화시켜야 합니다. 하지만 이런 방식이 항상 좋은 것은 아닙니다. 적절한 사용자 경험을 위해서는 페이지 전환 없이 콘텐츠를 업데이트하는 것이 바람직할 수 있습니다. 이 경우에는 React의 state 나 context API를 사용하여 로컬 상태 관리를 하거나, react-query 같은 데이터 페칭 라이브러리의 refetch 기능을 활용하여 필터링된 데이터를 새로 가져오는 방법을 고려해 볼 수 있습니다. 그래서 Next.js에서 탭 기능을 구현하는 최선의 방법은 프로젝트의 요구 사항과 사용자 경험이 결정합니다. URL 변경과 페이지 재사용을 원한다면 Next.js의 라우터 API와 Query Parameter를 활용하면 됩니다. 만약 동적인 사용자 인터페이스가 필요하다면, 로컬 상태 관리나 데이터 fetching 라이브러리를 통한 접근 방식도 충분히 유효합니다.

목록으로