오늘 공부한것 & 기억하고 싶은 내용
Layouts
- nextJS는 layout 컴포넌트를 먼저 렌더링하고 이동하려는 페이지를 URL을 통해 인식하여 layout 컴포넌트 안에 해당 페이지를 렌더링하게 되는 방식을 가지고 있다.
- 따라서 재사용성이 강한 헤더나 푸터는 layout 컴포넌트에 넣는 것이 효과적이다.
- 모든 페이지에 코드를 일일이 넣어줄 필요가 없다. -> 재사용성을 높이고 코드 중복을 줄이는 데 유용
- 레이아웃은 중첩이 가능해서 다른 디렉토리에 layout이 또 생긴다면 그걸 토대로 그 구조에 맞는걸 넣어준다.
- 렌더링 순서: layout은 페이지 이동 시 매번 재렌더링되지 않고, 상위 레이아웃은 상태를 유지하면서 하위 경로 페이지만 새롭게 렌더링되어 성능적으로 효율적이다.
모든 페이지에 반복적으로 필요한 요소는 layout 컴포넌트에 추가하는 것이 효과적이고, 중첩 레이아웃을 활용해 각 경로별로 적합한 UI 구성을 할 수 있다.
route groups
- 사용 방법: 폴더명을 소괄호로 묶어준다. ( ) -> 소괄호로 묶어준 폴더는 URL을 바꾸지 않는다.
- routes들을 그룹화해서 logical groups으로 만들 수 있다.
- 루트 레이아웃을 사용하지 않고 대신 여러 레이아웃을 사용하게 할 수도 있다.
- 레이아웃 중에서 선택하거나 선택 헤제하여 사용 가능
- 중첩 레이아웃을 원하지 않는 경우에 사용 가능
Metadata
- 꼭 내보내야 하는 객체이고, 메타데이터라고 불린다.
- 페이지나 레이아웃만 메타데이터를 내보낼(export) 수 있다.
- 컴포넌트에서는 메타데이터를 내보낼 수 없고, 또 메타데이터는 서버 컴포넌트에서만 있을 수 있다. (클라이언트 컴포넌트에서는 X)
- 무엇을 넣든 안에 들어가고, SEO 최적화에 도움을 준다.
- 템플릿도 만들 수 있음 / 병합 가능
export const metadata: Metadata = {
title: {
template: "%s | Next Movies",
default: "Next Movies",
},
description: "The best movies on the best framework",
};- 동적 메타데이터(Dynamic Metadata): generateMetadata 함수를 사용하여 동적 값이 필요한 메타데이터를 가져올 수 있다.
Dynamic Routes
- 리액트 라우터는 이렇게 썼지만
/movies/:id, useRouter().query.params 등을 사용했다.
NextJs에서는/movies/[id]라고 쓴다. 대괄호로 감싸주면 이곳엔 무엇이 들어가도 괜찮다라는 뜻이다. - 동적 라우터를 사용하려면 대괄호로 감싼 폴더가 있어야 하고 그 안에 page.jsx가 있어야 한다.
- 백엔드에서 렌더링 된것이기 때문에 하이드레이션 안 일어남, 자바스립크 노실행
- 브라우저 콘솔엔 안뜸!
백엔드 콘솔에 props를 쳐보면 {params: , searchParams: } 이게 뜸! 두개의 종류의 props를 얻는다.
- /movies/3454545?region=kr&page=2
- {param: {id: '3454545'}, searchParams: {region: 'kr', page: '2'}}
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
배운점 & 느낀점
NextJs의 초기 라우팅 개념이 끝났다. 리액트를 배우고서 NextJs 개념을 들으니 훨씬 더 이해가 쉬운거 같다.
복잡했던게 프레임워크로 하려니 너무 간단하다. 세상엔 똑똑한 사람들이 너무 많은거 같다. 그들이 만든 프레임워크를 열심히 쓰는게 나의 일^^
열심히 패턴을 배워서 얼른 NextJs 코드로 사이트를 만들어보고 싶다!
프론트는 순항중 ¿¿