[NextJS] /app 아래의 page.tsx 와 layout.tsx 의 차이점

우선 라이브러리인 React 와 다르게 NextJS 는 프레임워크입니다. 즉, NextJS 에서는 프레임워크가 지정하는 룰을 따라야합니다.

각 파일은 url경로의 역할을하며, 파일 아래의 page.tsx 와 layout.tsx 를 중점적으로 살펴보겠습니다. page.tsx - 용도: 각각의 `page.tsx` 파일은 Next.js 프로젝트 내의 독립적인 웹 페이지를 정의합니다. - 위치: `pages` 디렉토리 또는 Next.js 13 이상의 `/app` 디렉토리 내에 위치할 수 있으며, URL 경로와 직접적으로 연결됩니다. - 필수성: 각 페이지 경로에는 해당 페이지를 정의하는 `page.tsx` 파일이 필수적으로 존재해야 합니다. layout.tsx - 용도: `layout.tsx` 파일은 하나 이상의 페이지에 공통적으로 적용될 레이아웃을 정의합니다. 이는 헤더, 푸터, 사이드바와 같은 반복되는 UI 요소를 포함할 수 있습니다. - 위치: 주로 `components` 디렉토리 또...