Document 컴포넌트
Next.js에는 <html> 태그와 <body> 태그를 조작하기 위해서 <Document> 컴포넌트를 제공한다.
Build 시점에 _document.js파일을 pages 디렉토리 안에서 탐색하고 <Document>를 extends 한 컴포넌트를 이용해서 커스텀 설정을 받아들히는데, 이는 필수 파일은 아니며, 만약 우리가 커스텀하지 않으면 기본 Next의 모듈에 존재하는 _document.js 파일을 실행시킨다.
프로젝트가 커질 수록 HTML 태그를 조작해야할 일들이 많아지므로 우리는 _document.js의 <Document> 컴포넌트를 다룰 수 있는 능력이 있어야 한다.
기본 구조
pages 디렉토리 아래에 _document.js파일을 생성한다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument<Document>는 Class 형 컴포넌트만 지원하며 다음 4가지 컴포넌트는 필수로 존재해야 한다.
<Html><Head><Main><NextScript>
여기서 설명하지 않는 <Main>과 <NextScript>는 이곳에서 확인할 수 있다.
주의
import Document, { Html, Head, Main, NextScript } from 'next/document'그리고 4가지 필수 컴포넌트는 위와 같이 next/document에서 import 해야한다.
우리는 next/head에서 제공하는 <Head> 컴포넌트를 지난 시간Next에서 head 태그를 조작하는 방법에 배운적이 있다.
그것과 사용법 용도가 조금 다른데,
next/head의 Head 컴포넌트
next/head의 Head 컴포넌트는 특정 페이지에서 바뀌는 Head 태그에서 사용해야한다.
예를 들어 페이지마다 바뀌는 <title> 태그를 적용할 경우, 이는 pages 디렉토리 내에 있는 컴포넌트에서 next/head의 <Head> 컴포넌트를 이용해야한다.
next/document 의 Head 컴포넌트
next/document 의 Head 컴포넌트는 모든 페이지에서 사용할 Head 속성들을 조작할 때 사용한다.
예를 들어 페이지의 언어 설정인 <lang>과 같은 속성일 경우 _document.js에서 next/document의 <Head>를 import 하여 사용한다.
끝으로
이렇게 오늘은 document.js 파일에서 Html 구조를 조작하는 방법에 대해서 알아보았다.
Document 컴포넌트는 오로지 서버에서만 렌더되므로 onClick과 같은 이벤트 헨들러는 작동하지 않는다.
또한 <Main /> 밖에 있는 리액트 컴포넌트는 브라우저에서 작동하지 않고, 만약 HTML에 항상 존재하는 NavBar이나 SideBar과 같은 컴포넌트를 적용시키고 싶다면 App 컴포넌트를 이용하면 된다.
App 컴포넌트를 사용하려면 해당 카테고리를 확인해보면 된다!
'📺 Front End > -- react & redux & nextjs' 카테고리의 다른 글
| [React-redux] 늘 그렇듯 Todo List 를 만들어보며 배우는 리액트 리덕스 (0) | 2021.06.10 |
|---|---|
| [Next.js] Next.js 프로젝트에서 Storybook으로 TDD 하기 (Feat. Atomic Design Pattern) (2) | 2021.01.18 |
| [Next.js] renderPage 함수로 styled-components 오류 방지하기. (0) | 2021.01.03 |
| [styled-components] ThemeProvider에서 MediaQuery를 적용하는 2가지 방법 (2) | 2021.01.02 |
| [styled-components] ThemeProvider로 공통 스타일 속성 관리하기. (0) | 2021.01.02 |
댓글0