dynamic import 에서 export 컴포넌트 가져오기

Next.js를 사용하다보면 ServerSide에서 렌더링 할 수 없는 라이브러리를 사용하게 된다. 예를 들면 ToastUI, ReactQuill... 같은 라이브러리들

때문에 별도의 컴포넌트를 생성하고 그 컴포넌트를 dynamic import를 해서 가져오는 방법을 사용한다.

ToastUI Editor를 사용한다면

import { Editor } from "@toast-ui/react-editor";
import "@toast-ui/editor/dist/toastui-editor.css";
import { useRef } from "react";

const ToastEditor = () => {
  const editorRef = useRef<Editor>(null);
  const toolbarItems = [
    ["heading", "bold", "italic", "strike"],
    ["hr"],
    ["ul", "ol", "task"],
    ["table", "link"],
    ["image"],
    ["code"],
    ["scrollSync"],
  ];

  return (
    <div>
      <Editor
        ref={editorRef}
        initialValue=" "
        placeholder="write..."
        previewStyle="vertical"
        height="60vh"
        theme=""
        usageStatistics={false}
        useCommandShortcut
        toolbarItems={toolbarItems}
      />
    </div>
  );
};

export default ToastEditor;

이렇게 ToastEditor 컴포넌트를 생성해서 export 해주면 된다.

이때 export하는 방법은 2가지가 있다.

지금처럼 export default를 사용하는 방법과 export만 사용해서 내보는 방법이다.

const ToastEditor = () => {};
export default ToastEditor

export const ToastEditor = () =>{};

export default를 사용할 경우 가져올 때

import dynamic from "next/dynamic";

const ToastEditor = dynamic(() => import("../components/ToastEditor"), {
  ssr: false,
});

export default function Home() {
  return <ToastEditor />;
}

바로 import를 해올 수 있다

하지만 문제는 export만 사용할 경우

const ToastEditor = dynamic(() => import("../components/ToastEditor"), {
  ssr: false,
});

이렇게 가져올 수가 없다...

일반적으로 export를 사용할 경우 이렇게 가져오지만

import {ToastEditor} from "./components/ToastEditor"

dynamic import 안에서 저렇게 사용할 수없다...

가져오는 방법은

const ToastEditor = dynamic(
  () => import("../components/ToastEditor").then((mod) => mod.ToastEditor),
  {
    ssr: false,
  }
);

import 뒤에 then을 사용해서 (mod) => mod.ToastEditor를 반환해줘야 정상적으로 불러올 수 있게된다.

항상 export default를 사용하다가 이번에 export만 사용하기로 하면서 예외적으로 ToastEditor 컴포넌트만 export default로 쓸까 하다가 여기저기 찾아보면서 답을 찾아냈다...

한번쯤은 생각해볼 문제였는데 안일하게 생각하고 있었다