1. _app.js ?

모든 페이지에 공통적으로 적용되는 컴포넌트를 정의하는 곳입니다.

_app.js는 프로젝트의 전반적인 설정, 레이아웃, 스타일링 등을 관리하는 중추적인 역할을 합니다.

_app.js의 기능

페이지 초기화 : 모든 페이지가 로드되기 전에 일부 코드를 실행할 수 있습니다. 예를 들어, 페이지 렌더링 전에 필요한 데이터를 불러오는 등의 작업을 처리할 수 있습니다.

레이아웃 설정 : 모든 페이지에서 공통으로 사용되는 레이아웃(네비게이션, 푸터 등)을 설정할 수 있습니다.

상태 관리 : React의 Context API나 Redux와 같은 상태 관리 라이브러리를 이용해 전역 상태를 관리할 수 있습니다.

CSS 적용 : 전역 CSS나 CSS-in-JS 라이브러리를 적용할 수 있습니다.

아래 코드는 _app.js의 기본 구조입니다.

import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

globals.css는 전역에서 지정하는 스타일입니다.

Component props는 현재 라우팅되고 있는 페이지의 실제 컴포넌트입니다.

pageProps props는 현재 페이지 컴포넌트로 전달되어야 하는 props입니다.

_app.js Layout 적용하기

_app.js에 Layout를 적용하는 예시 코드입니다.