[넥스트 Next.js] 라우팅을 이해하기 위한 주요 용어, 페이지 이동 기능

Tree

계층 구조를 시각적으로 잘 보기 위한 규칙(위 → 아래).

 

Subtree

tree의 한 부분, root부터 시작해서 leaf들에 이르기까지의 범위

 

Root

Tree 또는 Subtree의 첫 번째 노드( EX. root layout )

 

 

 

Leaf

children이 더 이상 없는 node

---

layout

• segment와 그의 자식 node에 일관된 UI를 적용하는 데 사용된다
• 자식 node에 있는 요소들이 공통으로 적용을 받아야 하기 때문에 반드시 children prop이 존재해야 한다
• 주로 headers, footers, sidebars 등과 같은 공통된 요소를 정의하는 데 사용된다
• 같은 레이아웃 내에서 다른 경로 간의 전환 시 리렌더링이 발생하지 않고 상태가 유지된다

 

template

• 라우팅 탐색 시 각 하위 항목에 대해 새 인스턴스를 만들어 DOM 요소를 다시 생성한다
• 사용자가 동일한 Template을 공유하는 경로를 왔다 갔다 할 때마다 DOM 요소가 다시 생성된다
• 페이지 전환 시 애니메이션을 계속 적용하려는 경우에 사용되며,  useEffect나 useState와 같은 훅에 의존하는 기능을 다루는 데 유용하다

layout vs template ( * 포인트 상태유지 유, 무 )

Layout : 여러 페이지에서 공통으로 사용되는 UI 요소를 정의하는 데 사용되고, 같은 레이아웃에서 경로 이동시에도 상태가 유지된다

Template : 특정 페이지, 라우트에 대한 UI 정의 및 특정 페이지의 디자인 및 동작을 제어하기 위해 사용되고
경로를 이동할 때마다 DOM 요소가 다시 생성된다

---

Not-found

• 일반적으로 사용자가 찾으려는 콘텐츠나 페이지를 찾을 수 없을 때 표시되는 페이지

 

Metadata

• 데이터에 대한 데이터, 정보의 속성을 설명하는 데이터로 웹 페이지의 정보를 설명하는 데 사용된다
• 정보를 구조화하고 설명하기 위해 사용된다
• 검색 엔진이나 브라우저가 페이지를 해석하고 사용자에게 표시하는 데 도움 된다

검색엔진으로 키워드 강조 예시 이미지

---

Link

• 기본적으로 a태그와 사용법이 같다
• 사용자가 링크를 클릭하기 전에 코드와 데이터를 미리 가져오는 프리페칭 기능을 지원한다 ( 마우스 오버 등으로 링크가 화면에 보이기만 하면 프리페칭이 시작된다 )
• 데이터를 미리 로드해 사용자가 링크를 클릭했을 때, 거의 즉시 페이지를 볼 수 있다

 

useRouter

useRouter를 사용할 때는 항상 코드 최상단에 “use client”를 입력해야 한다

1. router.push
   • 새로운 URL을 히스토리 스택에 추가한다
   • router.push로 페이지를 이동하면, 이동한 페이지의 URL이 히스토리 스택의 맨 위에 쌓이게 된다
   • 브라우저의 '뒤로 가기' 버튼을 클릭하면, 스택에 가장 최근에 추가된 URL로 돌아간다
2. router.replace
   • 현재 URL을 히스토리 스택에서 새로운 URL로 대체한다
   • 현재 페이지의 URL이 새로운 URL로 교체되며, '뒤로 가기'를 클릭했을 때 이전 페이지로 이동하지만, 교체된 페이지로는 돌아갈 수 없다.
   • 현재 페이지를 히스토리에서 완전히 대체한다.
3. router.back
   • 사용자를 히스토리 스택에서 한 단계 뒤로 이동시킨다
   • 마치 브라우저의 '뒤로 가기' 버튼을 클릭한 것과 같은 효과를 내며, 사용자를 이전에 방문했던 페이지로 돌아가게 한다
4. router.reload
   • 현재 페이지를 새로고침한다
   • 히스토리 스택에 영향을 미치지 않는다 페이지의 데이터를 최신 상태로 업데이트하고 싶을 때 사용한다