댓글작성시 엔터로 작성하면 두번째 렌더링인 '\n'이 작성되는 버그 (+14,+138

버튼을 눌러서 댓글을 작성하면 문제가 안생기는데 엔터버튼으로 댓글 작성시 아래 콘솔창처럼 댓글이 두번찍히면서 자꾸 빈 댓글이 렌더링되었다.

 

어제는 useEffect의 의존성배열에 이값 저값을 넣어보다가 하루가 갔다.

setState를 sideEffect로부터 보호하면 해결될것이라 생각했지만 해결되지 않았다.

 

 

계속 고민하다가 프사,닉네임등은 다 배제하고 댓글만 map으로 찍어보았다.

 

 

 

 

두 코드가 렌더링된 화면을 유심히 관찰하다가 '유레카' 순간이 왔다.

당연한것인데, 난 당연한것을 그때서야 깨달은것이다...

컴퍼넌트에 props로 '\n'를 전달할때는 '\n'가 고스란히 전달되어 렌더링되는 것이었다!

아래코드를 삽입해주니 해결되었다.

if (comment.text === "\n" ) return null;

 

 

아래와 같이 빈댓글은 입력되지 않는다.

 

 

요약

useEffect로 setState를 sideEffect로부터 보호하려 했지만

해결책은 props 전달문제였다.

 

컴퍼넌트에서 전달받은 props를 렌더링할때 '\n'까지 렌더링된다는 것을 살피지 못해 겪은 버그다.

 

조건문으로 text가 '\n'일때는 null을 리턴하게 하여 해결

 

 

 

 

---

https://wnsdufdl.tistory.com/216?category=1034885 

Full SEB 33기 Section 3 회고 (112일차)

section3회고에서 어물쩡넘어가지 않고 문제가 생기면 문제랑 마짱뜨겠다고 했는데, 내가 한 말을 지키고있는것같아서 기분이 좋다