useState안쓰는 이유가 뭔가요?ㅠ

Question

비디오 디테일 페이지에서 댓글 올리자마자 comment list에 업뎃 바로바로 되고 화면에 re-render되기 위해 새로운 function을 만들던데요,, useState의 2번째 args인 array에 뭔가 넣어두면 그게 변경될때만 re-render되는거라고 배워서 그렇게 해봤거든요? 근데 미친듯이 console.logging이 되더라구요 ㅠㅠ 제가 생각한대로 댓글 달때마다 re-render은 되는데, 댓글을 새로 달지 않고 가만히 있을때도 미친듯이 logging이 되고 re-render이 되니까 이상해서요 ;; 이유가 뭘까요? const   VideoDetailPage   =   ( props )   =>  {   const  [videoDetail, setVideoDetail]  =   useState ( [] );   const  [commentList, setCommentList]  =   useState ( [] );   const  videoID  =  props . match . params . videoID ;   const  variable  =  {  videoID :  videoID } ;    useEffect (()   =>  {     axios . post ( ' /api/video/getVideoDetail ' , variable) . then ( ( res )   =>  {       if  (res . data . success) {          setVideoDetail ( res . data . videoDetail );       }  else  {          alert ( ' 비디오 정보 가져오기 실패 ' );       }     }) ;     // 이 부분이 끊임없이 re렌더 됩니다..ㅠㅠ      console . log (commentList) ;     axios . post ( ' /api/comment/getComments ' , variable) . then ( ( res )   =>  {       if  (res . data . success) {          setCommentList ( res . data . comments );       }  else  {          alert ( ' 코멘트 정보 가져오기 실패 ' );       }     }) ;   }, [commentList] );

Doosik · Answer

해보진 않았지만 지금 상태에서 별로 변화를 주고싶지않다면 aixos success 이후에 prevCommentList == res.data.comments 같은걸 비교해서 달라질경우에만 setCommentList 를 해도 좋을것 같네요.

Doosik · Answer

일단. useState 가 아니라 useEffect네요. commentList의 변화를 감지하여 리랜더 될텐데요. axios에서 setCommentList를 해주고 있기때문에 일종의 재귀현상이 일어나는 걸로 보입니다. useEffect 감지할 대상을 비워서 최초한번만 실행하게하고 해당 기능을 useEffect밖으로빼는것도 좋을것 같기도하네요. (원래코드가 기억안납니당) 커멘트리스트를 가져오는 것을 버튼 클릭으로 하든 스크롤로 하든 의도된 액션이 가해졌을때만 동작하게 하는게 좋을 것 같아요