• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

21.01.24 21:56 작성 조회수 145

0

비디오 디테일 페이지에서

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

course-thumbnail

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

도표 자료

강의실 바로가기

답변 2

·

답변을 작성해보세요.

0

Doosik님의 프로필

Doosik

2021.07.23

해보진 않았지만 지금 상태에서 별로 변화를 주고싶지않다면

aixos success 이후에

prevCommentList == res.data.comments 같은걸 비교해서

달라질경우에만 setCommentList 를 해도 좋을것 같네요.

0

Doosik님의 프로필

Doosik

2021.07.23

일단. useState 가 아니라 useEffect네요.

commentList의 변화를 감지하여 리랜더 될텐데요.

axios에서 setCommentList를 해주고 있기때문에 일종의 재귀현상이 일어나는 걸로 보입니다.

useEffect 감지할 대상을 비워서 최초한번만 실행하게하고

해당 기능을 useEffect밖으로빼는것도 좋을것 같기도하네요.

(원래코드가 기억안납니당)

커멘트리스트를 가져오는 것을 버튼 클릭으로 하든 스크롤로 하든 의도된 액션이 가해졌을때만 동작하게 하는게 좋을 것 같아요

이 글과 비슷한 Q&A