import Document, { Html, Head, Main, NextScript } from 'next/document';
next/document에서 Document, Html, Head, Main, NextScript 컴포넌트를 가져옵니다.
- Document: HTML 문서의 기본 구조를 정의하는 클래스입니다.
- Html: 전체 HTML 문서를 감싸는 태그입니다.
- Head: 문서의 <head> 태그에 들어가는 내용(메타데이터, 스타일링 등)을 정의합니다.
- Main: Next.js 애플리케이션의 주요 컨텐츠를 렌더링하는 부분입니다.
- NextScript: Next.js가 자동으로 삽입하는 스크립트 태그를 포함합니다.
class MyDocument extends Document {
render() {
return (
<Html lang='ko'>
<Head />
<body>
<Main />
<NextScript />
<div id="notifications"></div>
</body>
</Html>
);
}
}
export default MyDocument;
각 부분의 역할
Html 태그:
- lang='ko' 속성을 사용하여 문서의 언어를 한국어로 설정합니다.
Head 태그:
- Next.js 애플리케이션에서 필요한 메타데이터, 스타일링 등을 포함합니다. 추가적인 메타태그, 폰트, 스타일 등을 여기에 추가할 수 있습니다.
body 태그:
- Main 컴포넌트: Next.js 페이지 컴포넌트가 이곳에 렌더링됩니다.
- NextScript 컴포넌트: Next.js가 애플리케이션의 기능을 위해 필요한 스크립트 태그들을 포함합니다.
- div id="notifications": 알림(Notification) 컴포넌트를 포탈로 렌더링할 DOM 요소입니다. 이 요소를 추가함으로써 Notification 컴포넌트가 올바른 위치에 렌더링될 수 있습니다.
목적
이 커스텀 문서 파일을 통해 HTML 문서의 기본 구조를 제어할 수 있으며, 전역적으로 필요한 설정을 추가할 수 있습니다. 특히, 여기서는 알림(Notification) 컴포넌트를 포탈로 렌더링하기 위해 div id="notifications" 요소를 추가하였습니다. 이 요소를 통해 Notification 컴포넌트가 DOM에 안전하게 렌더링됩니다.
MyDocument 클래스는 기본 Document 클래스를 확장하였으며, Next.js는 이 커스텀 문서를 사용하여 최종 HTML 페이지를 렌더링합니다.
notification.js
import { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import classes from './notification.module.css';
function Notification(props) {
const { title, message, status } = props;
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
return () => setMounted(false);
}, []);
const statusClasses = `${classes.notification} ${classes[status]}`;
if (!mounted) {
return null;
}
return ReactDOM.createPortal(
<div className={statusClasses}>
<h2>{title}</h2>
<p>{message}</p>
</div>,
document.getElementById('notifications')
);
}
export default Notification;
- ReactDOM.createPortal을 사용하여 JSX 요소를 document.getElementById('notifications')에 렌더링합니다.
- statusClasses에 따라 알림의 스타일이 동적으로 결정됩니다.
목적
이 컴포넌트의 목적은 알림 메시지를 특정 DOM 노드에 렌더링하는 것입니다. 이를 통해 알림 메시지가 다른 UI 요소들과 겹치지 않고, 항상 동일한 위치에 나타나도록 할 수 있습니다.
포털(Portal)을 사용함으로써, 이 알림 컴포넌트는 React 컴포넌트 트리 외부의 DOM 노드에 렌더링될 수 있으며, 이는 모달, 팝업 등의 UI 요소를 구현할 때 유용합니다. mounted 상태는 컴포넌트가 DOM에 추가되었는지 확인하여, 불필요한 렌더링을 방지합니다.
소스 : https://github.dev/braverokmc79/nextjs-pageApp-blog
https://nextjs-pageapp-blog.netlify.app/
댓글 ( 0)
댓글 남기기