useRef의 current값에 retry만 있습니다 ㅠ

Question

import dynamic from "next/dynamic"; import React, { useState, useRef } from "react"; import { useForm } from "react-hook-form"; import { MainCategory } from "@/types/categorys"; import { subCategoryListMap } from "@/variable"; import { useCreatePost } from "@/hooks/bbs/useCreatePost"; import "@toast-ui/editor/dist/toastui-editor.css"; import styles from "./index.module.scss"; const Editor = dynamic(() => import("@toast-ui/react-editor").then((mod) => mod.Editor), { ssr: false }); interface PostWriteProps { mainCategory: MainCategory; } const CreatePost = ({ mainCategory }: PostWriteProps) => { const subCategoryList = subCategoryListMap[mainCategory].filter((item) => item !== "All"); const [currentCat, setCurrentCat] = useState(subCategoryList[0]); const editorRef = useRef(null); const { register, handleSubmit } = useForm({ mode: "onChange" }); const mutationHandler = useCreatePost(mainCategory); const submitHandler = { onSubmit: (data: any) => { const content = editorRef; const req = { subCategory: currentCat, title: data.title, content, }; console.log(req); // mutationHandler.mutate(req); }, onError: (error: any) => { console.log(error); }, }; return ( ); }; export default CreatePost; 혹시라도 잘못전달 될까봐 스크립트 전체를 가져왔습니다 죄송합니다 ㅠ submit시 출력값을 보면 이렇게 retry가 계속 들어가 있습니다ㅠ 찾아보니 retry는 dynamic 사용 시 발생할 수 있는 메서드라는데, 아무리 생각해봐도 ref문제인것 같은데 어떻게 접근해서 풀어야할지 막막하네요..ㅠ 비슷한 경험겪으신분 계실까요 ㅠ ------------------------------------------------------------------------------------------------------------------- import React, { useState, useRef } from "react"; import { useForm } from "react-hook-form"; import { Editor } from "@toast-ui/react-editor"; import { MainCategory } from "@/types/categorys"; import { subCategoryListMap } from "@/variable"; import { useCreatePost } from "@/hooks/bbs/useCreatePost"; import "@toast-ui/editor/dist/toastui-editor.css"; import styles from "./index.module.scss"; interface PostWriteProps { mainCategory: MainCategory; } const CreatePost = ({ mainCategory }: PostWriteProps) => { const subCategoryList = subCategoryListMap[mainCategory].filter((item) => item !== "All"); const [currentCat, setCurrentCat] = useState(subCategoryList[0]); const editorRef = useRef(null); const { register, handleSubmit } = useForm({ mode: "onChange" }); const mutationHandler = useCreatePost(mainCategory); const submitHandler = { onSubmit: (data: any) => { const content = editorRef.current.getInstance(); const req = { subCategory: currentCat, title: data.title, content, }; console.log(req); // mutationHandler.mutate(req); }, onError: (error: any) => { console.log(error); }, }; return ( ); }; export default CreatePost; 이렇게 dynamic 없이 사용하니까 에러가 안나네요...? toast는 ssr에서 사용할 수 없고 에러가 나서 dynamic을 써야한다고 하는데 왜 오히려 dynamic을 안쓰니까 제대로 작동하는걸까요..? 왜 안되는거지? 에서 왜 되는거지? 로 바뀌었네요;;

BGProgramming · Accepted Answer

일단 제가 nextjs는 사용해본적은 없어서 답변이 잘못될 수 도 있습니다.그리고 질문을 보니 몇가지 문제가 있다고 생각이 들었습니다.일단 답변을 해 본다면 첫번째는 dynamic과 문법을 보아하니 컴포넌트 동적로딩을 사용한 것으로 보입니다.동적로딩, lazy로딩이라고 하죠.이럴 경우 컴포넌트는 바로 로딩되는것이 아닙니다.말그대로 동적로딩... 코드 실행중에 로딩이 되는 상황입니다.일반적으로 이 타이밍은 화면에 그려지는 랜더 타이밍보다 느립니다.즉 제일 화면 컴포넌트가 생성될때 Editor에서 실제 인스턴스는 한참 후에나 생성될 거라는 겁니다.또한 코드에서 이 editor의 실제 인스턴스가 생성될 때까지 대기하고 있는 코드도 없죠.즉, 아래의 Editor 컴포넌트가 실행될 때 실제 이 인스턴스는 없을거라는 겁니다.그에비해 아래 잘 실행된다는 코드에서는 동적 로딩이 아닙니다.이에 기존 코드의 컴포넌트가 불러져있고 ref 실행도 정상적으로 실행되는 코드입니다.몇가지 문제점이라고 한다면....1. 동적 로딩에 대한 이해2. React 컴포넌트 로딩에 대한 이해3. React 컴포넌트 라이프 사이클등을 공부하면 좋을 것 같습니다.또한 공부하실때는 서버와 클라이언트를 둘다 하면서 공부하시면 헷갈리기 쉽상입니다.특히 nextjs 처럼 서버와 클라이언트를 둘다 한 코드에 구현하는거라면 더더욱이요.이에 개발 공부라면 이런 툴을 처음에 공부하는것은 그다지 추천하고 싶지는 않습니다.이런 툴은 서버와 클라이언트를 제대로 이해하고 있을때 중소규모 프로젝트에서 간단히 구현한다면 좋은 툴입니다.

useRef의 current값에 retry만 있습니다 ㅠ

1개의 답변

#ssr 목록