Next.js에서 toast-ui 컴포넌트를 ref로 가져올 수가 없습니다 ㅠ

Question

문제가 발생한 코드부모 컴포넌트import React, { useRef } from "react"; import WysiwygEditor from "../wysiwygEditor"; const CreatePost = () => { const editorRef = useRef(null); const printRefCurrent = () => { console.log(editorRef.current); } return ( <> ); }; export default CreatePost;자식 컴포넌트import dynamic from "next/dynamic"; import React, { useImperativeHandle, useRef, forwardRef } from "react"; import "@toast-ui/editor/dist/toastui-editor.css"; const Editor = dynamic(() => import("@toast-ui/react-editor").then((mod) => mod.Editor), { ssr: false }); const WysiwygEditor = forwardRef((props, ref) => { const editorRef = useRef(null); useImperativeHandle(ref, () => ({ current: editorRef.current })); return ( <> ); }); export default WysiwygEditor;Click 버튼 클릭 시Troubleref의 current 프로퍼티가 컴포넌트를 참조하지 않고 retry 함수를 참조하고 있습니다.Trytoast-ui는 SSR에서 실행할 수 없어서 dynamic으로 CSR에서 로드하고 있습니다. useRef 타이밍의 문제인가 싶었지만, useRef는 SSR에서 작동하지 않기 때문에 클라이언트에서 처음 초기값을 current값으로 가진 후에 다시 current값으로 컴포넌트를 참조하므로 선언 타이밍 문제는 또 아닌 것 같습니다. 혹시 몰라서 useImperativeHandle를 사용해보기도 했는데 여전히 retry를 참조하고 있습니다..어디에서 문제가 발생하고 있는걸까요.. 몇일째 해결방법을 찾고있습니다ㅠ 사람이 죽어가요 ㅠ 진짜 저 이거 못 풀면 억울해서 죽어도 귀신되고 심령사진 찍히고 유튜브 히트칠거 같고 ㅠㅠ

왕큰새 · Accepted Answer

아직 해결 못하신거 같아서 올려봅니다 props로 전달해보세요import React from 'react'; import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; interface WysiwygEditorProps { editorRef: React.RefObject; } // eslint-disable-next-line react/function-component-definition const WysiwygEditor: React.FC = ({ editorRef }) => { return ( ); }; export default WysiwygEditor; parent componentimport dynamic from 'next/dynamic'; import { Editor } from '@toast-ui/react-editor'; const WysiwygEditor = dynamic(() => import('../components/WysiwygEditor'), { ssr: false }); function ParentComponent() { const editorRef = useRef(null); const handleButtonClick = useCallback(() => { if (editorRef.current) { const editorInstance = editorRef.current.getInstance(); console.log('editorInstance', editorInstance); console.log('Editor content:', editorInstance.getMarkdown()); } }, []); return ( <> )}retry만 나오는 이유가 정확히 뭔지는 모르겠지만 Next.js의 동적 임포트 처리와 forwardRef 사용의 조합에서 ref 전달 과정에 문제가 발생한걸로 파악되네요 위 작성된 코드처럼 하시면신나게 instance를 물고 뜯고 즐겨보세요

왕큰새 · Answer

https://www.npmjs.com/package/@toast-ui/react-editor#getting-the-root-element 이 부분 참고하면 될거같은데요?

풍월상신(가니메디안) · Answer

forwardRef 를 잘못 쓰신 것 같아요.ref 는 부모 컴포넌트에서 생성한 뒤 자식 컴포넌트에게 프롭 처럼 넘겨주고,자식 컴포넌트는 forwardRef 로, 그 ref 를 받아서 바로 사용하면 됩니다.useImperativeHandle() 훅은, ref 에 펑션을 바인딩 해주는 목적에 사용됩니다.본문의 코드 만으로 판단하면 굳이 필요 없어 보여요. const WysiwygEditor = forwardRef((props, ref) => { return ( <Editor ref={ref} height="400px" initialEditType="wysiwyg" previewStyle="vertical" hideModeSwitch={true} useCommandShortcut={true} /> ); });

하얀뼈 · Answer

dynamic이 불안정하게 만드는 것 같은데...그거 쓰지말고 그냥 use client로 해보실래요?

풍월상신(가니메디안) · Answer

다이내믹 로딩의 순서가 엇갈리는 문제일 것 같습니다.Editor 컴포넌트가 다이내믹 로딩 대상인데,WysiwygEditor 컴포넌트에서 먼저 Editor 의 Dom 객체를 참조하는 Ref 를 생성하였기 때문에 발생하는 시간차 오류의 하나일 수 있습니다."use client" ... const WysiwygEditor = forwardRef((props, ref) => { const editorRef = useRef(null); useImperativeHandle(ref, () => ({ current: editorRef.current }), [editorRef]); return ( Loading editor...}> ); }); export default WysiwygEditor;Suspense 로 다시 시도해보세요.급하게 적다 보니 충분히 생각하지 못했네요. 추가합니다.useImperativeHandle(ref, () => ({ current: editorRef.current ? editorRef.current : null }), [editorRef]);여기에 분기도 필요하겠고,const EditorWrapper = forwardRef((props, ref) => { const editorRef = useRef(null); useImperativeHandle(ref, () => ({ current: editorRef.current }), [editorRef]); return ( ); }); const WysiwygEditor = forwardRef((props, ref) => { return ( Loading editor...}> ); });이렇게 컴포넌트를 한번 더 분리해서 useImperativeHandle 을 포함한 코드가 Suspense 로 감싸져야 할 것 같습니다.

Next.js에서 toast-ui 컴포넌트를 ref로 가져올 수가 없습니다 ㅠ

5개의 답변

Q&A 목록