인프런 커뮤니티 질문&답변

안녕하세요 이동훈님 이정환입니다.

1.4 챕터 "본격적인 학습에 앞서" 에서 아래와 같이 소개해드리고 있듯이

Next.js는 페이지 라우터 버전과 앱 라우터 버전으로 나뉩니다.

이때 앱 라우터 버전의 Next.js는 페이지 라우터 버전의 Next.js의 한계점들을 극복하기 위해 등장한 기술로, 페이지 라우터 버전의 Next.js 에 먼저 학습하셔야 수월하게 배우실 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. 이동훈님, 질문해주셔서 감사합니다!

useRouter에 관한 궁금증이 있으신 것 같습니다. Next.js에서 useRouter의 구체적인 사용법과 next/navigation의 관련성을 이해하는 데 도움을 드리기 위해 설명드리겠습니다.

앱 라우팅 및 페이지 라우팅

Next.js에는 두 가지 주요 라우팅 방식이 있습니다: 페이지 라우팅과 앱 라우팅.

1. 페이지 라우팅(Page Routing):

   • 전통적으로 많이 사용되어 온 방식입니다. pages 디렉터리 기반으로 파일 이름이 URL 경로로 맵핑됩니다.
     
   • 여기서 useRouter는 next/router에서 가져옵니다. 페이지 간 이동, URL 쿼리 등을 관리할 수 있습니다.
     

2. 앱 라우팅(App Routing):

   • Next.js의 새로운 라우팅 방식으로, 좀 더 현대적인 코드를 작성할 수 있게 돕습니다.
     
   • 컴포넌트 단위의 파일 시스템을 기반으로 하며, 인터랙션이 강화된 SPA(Single Page Application) 지원을 위한 기능들이 추가되었습니다.
     
   • next/navigation의 useRouter는 앱 라우팅에서 사용되며, React의 새로운 기능들과 결합되어 좀 더 세밀한 역량을 가져갑니다. 이는 앱 컴포넌트에서의 라우팅 처리를 간소화하기 위한 것입니다.
     

앱 라우팅과 페이지 라우팅의 차이점

• 구조 및 설계: 페이지 라우팅은 파일 기반이지만, 앱 라우팅은 컴포넌트 기반이므로 좀 더 유연한 설계가 가능합니다.
  
• 사용 사례: 페이지 라우팅은 전통적인 서버 렌더링과 CSR(Client-Side Rendering)에 적합하며, 앱 라우팅은 대규모 SPA에서 사용되는 구조적 특징을 포함하고 있어 특정 부분만 업데이트하거나 데이터를 효율적으로 관리할 수 있는 장점이 있습니다.
  

마무리 참고

앱 라우팅을 더 잘 이해하시려면 아래 링크를 확인해 보시길 추천드립니다:

• Next.js: 앱 라우팅에 대한 자세한 설명
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리며 질문에 대한 충분한 정보를 제공하려 노력하고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.