react-notion으로 노션 페이지를 서비스에 임베드하기

이하은·2022년 2월 18일

React

목록 보기

4/4

배경

회사 서비스 내에 단순 정보 제공용 문서 페이지이며 앞으로도 내용 업데이트가 자주 있을 것 같은 페이지가 급하게 필요한 상황이었다. 이런 페이지를 개발자가 직접 하나하나 코드로 구현하기보다는 노션에 문서를 작성 후 해당 노션 페이지를 불러오는게 훨씬 더 효율적일 것이라 생각했다.

a 태그에 노션 링크만 연결하는 방법은 새 탭을 띄우며 우리의 서비스를 이탈하게 되니 노션 페이지를 우리의 서비스로 임베드 할 수 있는 방법이 없을까 찾아보았다.

처음에는 iframe으로 노션 페이지를 띄우는것도 시도해봤지만 역시나 보안 문제로 사용할 수 없었다.
좀 더 검색해 보니 노션 페이지를 불러올 수 있는 react-notion 이라는 라이브러리가 있다는 걸 알게되었고, 덕분에 아주 간단하게 노션 페이지를 임베드할 수 있었다.

구현 방법

yarn add react-notion

우선 react-notion 을 설치한다.

공개용 노션 페이지의 url에서 엔드포인트인 노션 페이지 아이디를 가져온다.
예를 들어 https://leehaeun.notion.site/3acdc15e805b4f8faacf8a3dfdc59d17 에서는 3acdc15e805b4f8faacf8a3dfdc59d17 가 노션 페이지 아이디에 해당한다.

import 'react-notion/src/styles.css';
import 'prismjs/themes/prism-tomorrow.css'; // only needed for code highlighting

export default function ReactNotion() {
  const [response, setResponse] = useState({});

  useEffect(() => {
    const NOTION_PAGE_ID = '3acdc15e805b4f8faacf8a3dfdc59d17';
    axios
      .get(`https://notion-api.splitbee.io/v1/page/${NOTION_PAGE_ID}`)
      .then(({ data }) => {
        setResponse(data);
      });
  }, []);

  return (
    Object.keys(response).length && (
      <NotionRenderer blockMap={response} fullPage={true} />
    )
  );
}

컴포넌트를 위와 같이 작성한다.

import "prismjs/themes/prism-tomorrow.css"; 이 import문은 노션에 작성된 코드의 하이라이팅을 제공해주기 위해 쓰인다. 만약 불러오는 페이지에 코드 블록이 없다면 작성하지 않아도 된다.

Object.keys(response).length && 이 코드는 response 값이 초기값인 {} 빈 객체인지 확인하는 코드로, api 호출 후 response 값이 업데이트 되었을때만 NotionRenderer 를 렌더링한다. 이 코드를 작성하지 않으면 데이터를 받아오기 전 타이밍에서 rendering 할 값이 비었다며 아래와 같이 콘솔창에 warning을 띄운다.

위 코드에서 더 나아가서 NOTION_PAGE_ID 를 props로 받아오면 재사용 가능한 컴포넌트로 사용할 수 있다.

이제 해당 노션페이지에 가서 문서 수정을 하면 수정된 결과가 자동으로 서비스에도 반영이 된다. 개발자가 텍스트 수정을 하기 위해 코드를 직접 건드리지 않아도 된다. 아주 만족스럽다.

이하은

완벽함보단 꾸준함으로

이전 포스트

CRA 환경에서 배포 서버에 따라 .env 분기하기 (feat. env-cmd)

2개의 댓글

K Y

2023년 1월 10일

유익한 글 감사합니다~ react-notion 다운로드는 어디서 해야하나요?

답글 달기

shenbo

2024년 9월 12일

답글 달기