Toast ui Viewer undefined값 뜰 때

이번에 최종 프로젝트 하면서 깔끔하고 여러 느낌의 게시글을 쓸 수 있는 여러가지 에디터들을 봤는데 가장 깔끔하고 레퍼런스가 많은 toast.ui를 사용하게 되었다. 근데 레퍼런스가 많다고 생각했는데... editor 즉 글을 쓰는 부분은 분명히 많았다. 그런데 markdown이나 html로 db에 저장된 데이터를 가져와서 실제 글처럼 보여주는 viewer의 레퍼런스가 현저히 적어서 get으로 가져오고 눈에 보이게 띄우는데 애를 먹었다.·´¯(>▂<)´¯·. 일단 기본적인 viewer구조는
https://leego.tistory.com/entry/React-%EC%97%90%EB%94%94%ED%84%B0%EB%A1%9C-TOAST-UI-Editor-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0
이분 벨로그에 잘 나와있다.
내가 장장 하루동안 머리를 싸매고 고민했던 문제는 axios.get으로 markdown형식의 데이터를 가져왔는데 아무래도 비동기 통신이다 보니 처음 페이지가 렌더링 됐을 때 markdown데이터를 가져오지 못했고 Viewer의 initialvalue값이 undefined가 되면서 아무것도 뜨지 않았다...

아래 코드를 보면 get으로 가져온 후에 res값을 setstate함수로 받아서 state값을 viewer페이지로 props 값으로 넘겨준 모습이다.

//BoardDetail.js
const BoardDetail = () => {
  const dispatch = useDispatch()
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState();
  
    useEffect(() => {  
      setLoading(true)
        const getMark = async () => {
            await axios.get("http://localhost:4000/Review")
          .then((res)=>{
            setContent(res?.data[2])
            console.log(res?.data[2])
            })
          }
        getMark()
      }, [loading])

  return (
    <ScWrap>
      <Header/>
      <BoardMain/>
      <BoardImage data={content}/>
      <BoardLike/>
      <BoardComment/>
    </ScWrap>
  )
}

//Viewer.jsx
const BoardImage = ({data}) => {

    const [content, setContent] = useState(data?.data);

    useEffect(()=>{
        setContent(data?.data)
    },[data])

  return (
    <>
        <ScWrap>
            <ScImg src="https://vrthumb.imagetoday.co.kr/2020/10/29/tip1140001301.jpg"/>
         <Viewer 
            events={['load','change']}
            initialValue={content}/>
        </ScWrap>
        <ScHR/>
    </>
  )
}

보통 내가 알고있는 상식으로는 useState를 사용해서 state값이 바뀌면 페이지가 리랜더링 되고 값이 들어가야 하는데 얘는 뭐 콘솔에 오지게 찍히는데 값이 추가로 들어가질 않는거야...그래서 이것저것 엄청 만져보다가 혹시???????????하면서 나의 react 3대장 짱짱맨중에 optional chaining과 && 짱짱맨을 사용해 보았다.

  {content&&<Viewer 
            events={['load','change']}
            initialValue={content}/>}

BoardDetail.js에서 보이듯이 content의 초기값은 빈값이다. 이 초기값이 처음에 내려오고 바뀌질 않길래. content의 값이 존재하면!!! 이라는 조건을 넣어줫다고 생각하면 될 것이다. 이게 정답인지는 모르겠지만 난 이걸로 해결했다!

해결까지 함께 해준 대규님께 감사의 말을 전하면서 그럼 이만 오늘도 해결 찡끗--⭐ o(*≧▽≦)ツ┏━┓