반응형
※ 컴포넌트 렌더링 흐름
1. _app.js에서 공통의 layout 템플릿 컴포넌트를 가져와서 전체 Component를 Wrapping
2. _app.js에 있는 Component는 page 폴더 안쪽에 있는 각각의 페이지 컴포넌트를 의미
3. 모든 페이지 Component에는 Layout Component의 공통의 구조가 적용 됨
4. 각각의 페이지 컴포넌트에서 페이지별로 들어갈 컨텐츠 추가
_app.js
import Layout from '@/components/templete/Layout';
import '@/styles/globals.scss';
import axios from 'axios';
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Layout.jsx
import Head from 'next/head';
import Header from '../organisms/Header';
import styles from './Layout.module.scss';
import clsx from 'clsx';
function Layout({ children }) {
return (
<>
<Head>
<meta name='description' content='Generated by create next app' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className={clsx(styles.main)}>
<Header />
{children}
</main>
</>
);
}
export default Layout;
'IT > NextJs' 카테고리의 다른 글
| [NextJs] 페이지 전환 모션 적용시 스타일 제거되는 문제 및 해결 방법 정리 (0) | 2023.08.24 |
|---|---|
| [NextJs] Swiper 사용 시 SwiperCore 사용하는 이유 (0) | 2023.08.21 |
| [NextJs] Atomic Design Pattern 정리 (0) | 2023.08.16 |
| [NextJs] CSR , SSG , SSR , ISR 예제 (0) | 2023.08.04 |
| [NextJs] CSR , SSG , SSR , ISR 이론 정리 (0) | 2023.08.04 |