[React][NextJS][Notion] React에 Notion페이지를 가져오는 방법

# react-notion-x를 사용해서 React에서 Notion 페이지 보여주기

- Notion은 쉽게 웹 상에 공개된 페이지를 만들 수 있고, 기본 제공되는 디자인이 훌륭하기 때문에, 약관 동의나 사용법과 같은 서비스의 직접 적인 이미지나 기능에는 영향을 주지 않지만, 제공 되어야 하는 페이지를 작성하는데 자주 사용합니다. 그런데 Notion 페이지를 직접 링크를 걸어 보여주는 방법도 있지만, 이럴 경우 사용자가 Notion으로 이동해야 한다는 점이 불편합니다. 오늘 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 합니다.

# Github Page

https://github.com/NotionX/react-notion-x

GitHub - NotionX/react-notion-x: Fast and accurate React renderer for Notion. TS batteries included. ⚡️

 

# 사용법

- 필요한 라이브러리들을 설치해 줍니다. Notion 페이지에 접근하기 위해서는 내부적으로 notion-client 라이브러리를 사용하기 때문에 함께 설치해주어야 합니다.

yarn add notion-client react-notion-x

 

- NotionAPI를 초기화 하고, 페이지를 가져옵니다

import { NotionAPI } from 'notion-client'

const notion = new NotionAPI()

const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')

 

- 이렇게 가져온 recordMap을 아래와 같이 NotionRenderer에 넣어주시면 기본적인 사용법은 끝입니다.

import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'

export default ({ recordMap }) => (
  <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />
)

 

- 스타일링의 경우, 아래와 같이 import 해주시면, 기본 Notion의 스타일로 표시할 수 있습니다

// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'

 

- 앞에서 사용한 페이지 ID는 URL 주소에 포함되어 있으므로 쉽게 확인 하실 수 있습니다.

 

- 주의하실 점은 가져올 페이지가 공개로 설정이 되어야 한다는 점입니다. 만약 공개되지 않은 페이지를 가져오기 위해서는 권한이 필요하기 때문에 추가적인 처리를 해야 합니다, 관련 내용은 이 링크를 참고하시기 바랍니다.

- 그리고 NotionRenderer에는 기본적인 Notion 페이지 작성에 사용되는 블록들만을 포함하기 때문에, 아래와 같이 여러 컴포넌트를 추가해서 사용하실 수 있습니다.

import { Code } from 'react-notion-x/build/third-party/code'
import { Collection } from 'react-notion-x/build/third-party/collection'
import { Equation } from 'react-notion-x/build/third-party/equation'
import { Modal } from 'react-notion-x/build/third-party/modal'
import { Pdf } from 'react-notion-x/build/third-party/pdf'

export default ({ recordMap }) => (
  <NotionRenderer
    recordMap={recordMap}
    components={{
      Code,
      Collection,
      Equation,
      Modal,
      Pdf
    }}
  />
)

- 그 외에도 대부분의 Notion에서 제공하는 블록들을 지원합니다. 지원하는 블록 종류는 이 링크를 참고하시기 바랍니다.

---