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

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

도표 자료

작성

215

비디오 디테일 페이지에서

댓글 올리자마자 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]);