next js @toast-ui/react-editor 로 포스팅 만들기 와 다른 대안

next js 에서 포스팅 할수 있는 방법을 찾다가 @toast-ui/react-editor에 대해서 알게 되었다. 그래서 바로 install 하여서 사용하고자 했다.

사용 방법은 쉽다. 단 17버전 이상의 리액트를 쓴다면 에러가 있는데 이를 무시하고 사용하고자 한다면 아래와 같이 사용하면된다.

import { Box, Button, TextField } from '@mui/material';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';

import { Children, Dispatch, SetStateAction, useRef, useState } from 'react';

type Props = {
  setContents?: Dispatch<SetStateAction<any>>;
  children: JSX.Element | JSX.Element[];
};

export default function PostingEditor({ children }: Props) {
  const editorRef = useRef<Editor | null>(null);

  const sendContents = () => {
    const editorIns = editorRef.current && editorRef.current.getInstance();
    if (editorIns) {
      const content = editorIns.getMarkdown(); // Example usage
      console.log(content); // Do something with the content
    }
  };
  return (
    <Box>
      <Editor
        ref={editorRef}
        initialValue="글을 작성해주세요!"
        placeholder="글을 작성해주세요!"
        previewStyle="vertical"
        height="40rem"
        initialEditType="markdown"
        useCommandShortcut={true}
      />
      {children}
      <Box textAlign={'right'} margin={'1rem 5px'}>
        <Button variant="contained" onClick={sendContents}>
          제출하기
        </Button>
      </Box>
    </Box>
  );
}

나는 자주 사용하기 위해 컴포넌트 화 하여서 사용했고 PostingEditor 라고 컴포넌트를 만들었다. 이렇게 Import 해서 사용하면 되는데 nextjs 에서 주의할점은 ssr인지라 동적임포트로 사용을 해야 한다.

사용하고자 하는 위치에서 컴포넌트를 임포트 시킬때 const 이름 = dynamic(()=>import(경로),{ssr:false}) 이렇게 사용하면된다.

그리고 return 에 const로 지정한 이름을 써주면 된다.

아래처럼 잘 사용할수 있는데

다만 문제가 있었다. 처음에는 몰랐는데 다른 라이브러리를 다운로드 할때마다 npm 에러가 자꾸 뜨게 되는 것이다. 확인해보니 @toast-ui/react-editor 가 리액트 17버전 이상과는 호환이 안된다는 것이다. 무시하고 사용하고 싶었지만 에러가 계속 나와서
다른 대안을 찾아보기로하였다.

18 버전과 맞는 react-md-editor에 대해서 알게 되었으며 직접 사용해보고 사용법은 이후에 다시 포스팅 하도록 하겠다.