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

배경

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

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로 받아오면 재사용 가능한 컴포넌트로 사용할 수 있다.

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