useRouter 두개의 차이가 뭔가요?
next/navigation의 useRouter는 앱라우팅 때 사용한다고 하셨는데 앱라우팅이 뭔가요??
무슨차이가 있는지 궁금합니다.
답변 2
1
안녕하세요 이동훈님 이정환입니다.
1.4 챕터 "본격적인 학습에 앞서" 에서 아래와 같이 소개해드리고 있듯이
Next.js는 페이지 라우터 버전과 앱 라우터 버전으로 나뉩니다.
이때 앱 라우터 버전의 Next.js는 페이지 라우터 버전의 Next.js의 한계점들을 극복하기 위해 등장한 기술로, 페이지 라우터 버전의 Next.js 에 먼저 학습하셔야 수월하게 배우실 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이동훈님, 질문해주셔서 감사합니다!
useRouter에 관한 궁금증이 있으신 것 같습니다. Next.js에서 useRouter의 구체적인 사용법과 next/navigation의 관련성을 이해하는 데 도움을 드리기 위해 설명드리겠습니다.
앱 라우팅 및 페이지 라우팅
Next.js에는 두 가지 주요 라우팅 방식이 있습니다: 페이지 라우팅과 앱 라우팅.
페이지 라우팅(Page Routing):
- 전통적으로 많이 사용되어 온 방식입니다.
pages디렉터리 기반으로 파일 이름이 URL 경로로 맵핑됩니다.
- 여기서
useRouter는next/router에서 가져옵니다. 페이지 간 이동, URL 쿼리 등을 관리할 수 있습니다.
- 전통적으로 많이 사용되어 온 방식입니다.
앱 라우팅(App Routing):
- Next.js의 새로운 라우팅 방식으로, 좀 더 현대적인 코드를 작성할 수 있게 돕습니다.
- 컴포넌트 단위의 파일 시스템을 기반으로 하며, 인터랙션이 강화된 SPA(Single Page Application) 지원을 위한 기능들이 추가되었습니다.
next/navigation의useRouter는 앱 라우팅에서 사용되며, React의 새로운 기능들과 결합되어 좀 더 세밀한 역량을 가져갑니다. 이는 앱 컴포넌트에서의 라우팅 처리를 간소화하기 위한 것입니다.
- Next.js의 새로운 라우팅 방식으로, 좀 더 현대적인 코드를 작성할 수 있게 돕습니다.
앱 라우팅과 페이지 라우팅의 차이점
- 구조 및 설계: 페이지 라우팅은 파일 기반이지만, 앱 라우팅은 컴포넌트 기반이므로 좀 더 유연한 설계가 가능합니다.
- 사용 사례: 페이지 라우팅은 전통적인 서버 렌더링과 CSR(Client-Side Rendering)에 적합하며, 앱 라우팅은 대규모 SPA에서 사용되는 구조적 특징을 포함하고 있어 특정 부분만 업데이트하거나 데이터를 효율적으로 관리할 수 있는 장점이 있습니다.
마무리 참고
앱 라우팅을 더 잘 이해하시려면 아래 링크를 확인해 보시길 추천드립니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리며 질문에 대한 충분한 정보를 제공하려 노력하고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js + Tanstack Query BFF 구조 질문
0
4
1
Next.js 사전렌더링 이해하기 부분
0
27
2
모달 관련 질문
0
32
3
렌더링 관련 질문
0
77
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
62
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
92
3
vercel 배포를 실패하였습니다.
0
96
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
55
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
85
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
85
2
백엔드 서버 오류납니다.
0
80
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
75
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
109
1
서버 배포 에러입니다.
1
98
2