react-quill, dangerouslySetInnerHTML, Hydration failed error

👉 react-quill

이 전에 포스트에서 react-quill을 이용해서 게시글을 작성했는데, 해당 게시글의 내용을 백엔드에 전달해주고, 그 값을 받아오는 과정에서 error가 발생해서 문제점을 찾고 해결하고자 한다.

👉 dangerouslySetInnerHTML

react-quill에서 백엔드로 넘겨줄 때 </> 태그 형태로 넘겨주는데, 받을 때도 태그에 담겨져서 들어왔다. 사실 이 error를 해결하는 가장 좋은 방법은 백엔드 로직을 바꿔서 태그가 있는 상태로 api를 보내주는 것이 아니라 태그를 벗긴 상태로 값을 전달해 주는게 가장 좋다고 한다. 그런 상황이 안나온다면 나처럼...

<div dangerouslySetInnerHTML={{ __html: isData.body }} />

처음에는 이렇게 div태그로 이루어진 값에 isData.body즉, 본문 내용값을 받았다. 이렇게 하고 렌더링을 해보니 띄용 에러가 마구마구 뜨는것이다.

해당 에러에서 Hydration이라고 뜬는데 Hydration은 자세하고 정확한 내용은 직접 찾아보고, 쉽게 이야기 하자면,
ssr에서 가상dom에서 렌더링된 페이지와 javascript코드가 담겨져서 실제dom위에서 다시 렌더링과정을 거치면서 값을 확인하는데,
window에 관련된 값이 들어가면, 가상dom에서 렌더링된 내용과, 실제dom에서 렌더링된 내용이 달라서 나는 오류라고 한다.

👉 해결

해결 방법은 useEffect를 사용하거나, next/dynamic을 사용하는 방법인데,
next/dynamic은 이미 react-quill을 작성하면서 적어두었다.

const QuillWrapper = dynamic(() => import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

근데 나는 이렇게 했는데 안되길래 에라 모르겠다 하고, useEffect를 사용해 보았다.

처음에 useEffect에 태그를 어떻게 하면 담을 수 있을까 생각하다가 그냥 단순하게 boolean값을 state로 선언하고 사용했다.

const [getState, setState] = useState<boolean>(false);

  useEffect(() => { //마운트와 동시에 true값으로 바꿔서 ssr문제 해결!
    setState(true);
  }, []);

...

return ({getState && <div dangerouslySetInnerHTML={{ __html: isData.body }} />});

이런식으로 사용하니깐 에러가 사라졌다!

👉 추가적인 사항

HTML과 함께 보내는 것이기에 털릴 위험이 있다.
그래서 dompurify를 사용해서 털리는것을 방지했다