Toast UI Viewer 내용이 바뀌지 않는 현상

에러

게시판 오른쪽에 추천 게시판이 나열되는데 그곳에 있는 게시판을 누르면 본문 내용이 바뀌지 않는 에러가 발생했다. 아래 사진을 보면 작성자와 시간, 제목과 태그가 다른데 본문의 내용은 같다.

 

원인

원인은 마크다운을 받아 적용하기 위해서 Toast UI의 Viewer를 사용했는데 Viewer에 initialValue에 값을 넣게되면 리랜더링이 발생해서 값이 바뀌더라도 본문의 내용이 바뀌지 않았다.

 

해결

Toast UI Viewer로 해결을 보고 싶었지만 관련된 내용을 찾을수 없었다. 스택오버플로우에도 글은 있지만 답변은 없었다.(https://stackoverflow.com/questions/74414258/toast-editor-ui-doesnt-re-render-initialvalue-when-parent-state-changes)

그래서 다른 라이브러리인 react markdown을 사용하여 본문을 나타내기로 했다.(https://github.com/remarkjs/react-markdown)

// 수정 전
<Viewer initialValue={content} />

// 수정 후
<ReactMarkdown
	children={content}
	remarkPlugins={[remarkGfm]}
></ReactMarkdown>

• children에 본문이 들어간다.
• remarkPlugins는 사용자가 추가 할 플러그인이 들어간다.