toast viewer 새로고침 해야지 보이는 증상

Question

안녕하세요 이제 막 개발자가된 주니어 개발자입니다. 제가 공부겸 개인 프로젝트를 Next.js로 개발중인데,파이어 베이스에서 등록된 html코드를 받아서 toast viewer로 변환하여 보여주게 하고 싶습니다.이상하게도 최초에는 나오는데, 그 이후로 게시글 리스트에서 다른 글을 눌러도 아무것도 보이지 않는 현상이 존재합니다.next.js의 로 페이지간 이동을 하는데 이게 문제가 되는걸까요?게시글 리스트에서 새로고침을 한 후, 들어가면 항상 잘 나오는데 답답하네요 ㅜㅜ부모컴포넌트import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import dynamic from "next/dynamic"; // firebase import { collection, getDocs, query, where } from "firebase/firestore"; import { firebaseDb } from "../../../../firebase.config"; const BoardViewer = dynamic( () => import("../../../components/Main/Board/BoardViewer/BoardViewer"), { ssr: false } ); export default function BoardDetailPage() { const router = useRouter(); // get url parameter const urlParams = router.query.boardID; // parameter => clicked board type ...ex) blog, qna, news const boardType = (urlParams as string).split("=")[0]; // parameter => clicked board id const boardId = (urlParams as string).split("=")[1]; const [boardData, setBoardData] = useState({}); // search board detail data condition const condition = query( collection(firebaseDb, boardType), where("id", "==", boardId) ); // fetch board detail data func async function fetchBoardDetail() { const querySnapshot = await getDocs(condition); querySnapshot.forEach((doc) => { setBoardData(doc.data()); }); } useEffect(() => { fetchBoardDetail(); }, []); return (

); }자식컴포넌트import { Viewer } from "@toast-ui/react-editor"; import "@toast-ui/editor/dist/toastui-editor-viewer.css"; // toast plugin (code highlight) import Prism from "prismjs"; import "prismjs/themes/prism.css"; import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight"; import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css"; export default function BoardViewer(props: any) { console.log(props.boardData); return ( //

{props.boardData.content}

); }

code.snipers · Accepted Answer

id 가 변경되었을때 마다 다시 호출해야 할탠대, 그 부분이 빠진 듯 useEffect(() &#61;> { fetchBoardDetail(); }, [ id 가 변경되었을때 ]);

toast viewer 새로고침 해야지 보이는 증상

1개의 답변

#toastui 목록