이번에 최종 프로젝트 하면서 깔끔하고 여러 느낌의 게시글을 쓸 수 있는 여러가지 에디터들을 봤는데 가장 깔끔하고 레퍼런스가 많은 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(*≧▽≦)ツ┏━┓
감사합니다. 덕분에 viewer에서 값이 안바뀌는 걸 해결했습니다.