[ Next.js ] 4장 레이아웃과 페이지 생성

About this offer

4장 레이아웃과 페이지 생성 중첩 라우팅 Next.js 폴더를 사용해 중첩된 경로를 생성하는 파일 시스템 라우팅을 사용 → 폴더 구조를 이용해 주소 경로를 자동으로 생성 폴더 = 라우트 세그먼트 : /app 하위 생성 폴더 = 웹 URL 주소의 경로가 됨 page.tsx 파일 : 해당 URL 경로로 접속 시 보여줄 화면 컴포넌트 내보내는 파일 (필수 파일) → 이 파일이 있는 폴더만 공개 URL로 접근 가능 !image.png Colocation = 같이두기 콜로케이션 : 한 페이지에서만 쓰는 파일을 그 페이지와 같은 폴더 안에 함께 보관하는 방식 Next.js에서는 page.tsx 파일만 외부 URL로 공개됨 → 동일한 폴더 안에 다른 파일이 함께 있어도 URL로 노출되지 않고 안전하게 관리 가능 중첩 레이아웃 layout.tsx 파일 사용 → 여러 페이지가 공통으로 공유하는 UI 구성 부분 렌더링 페이지 이동 시 화면 전체를 새로 그리는 것 X, 변경된 페이지 컴포넌트 영역만 업데이트하고 레이아웃은 다시 렌더링 X 레이아웃이 재렌더링 X → 페이지 전환하더라도 레이아웃 내 남은 리액트 클라이언트 상태 그대로 유지됨 + 불필요한 전체 재로딩 없어서 화면 전환 속도 빠름 루트 레이아웃 /app/layout.tsx 파일은 모든 Next.js 프로젝트에 존재하는 최상위 레이아웃 → 웹사이트 전체를 감싸는 최상위 틀 루트 레이아웃에 포함된 UI는 애플리케이션 모든 페이지에 전역으로 공유됨 <html> , <body> 태그 직접 수정 or 메타데이터를 설정할 때 사용

Offer details

Provider

velog

Source

velog-rss

Score

54.36

Confidence

49%