Cannot update a component while rendering a different component 해결하기

프로젝트를 하다가 이런 에러가 발생했는데 프로젝트 실행하는데 문제가 없어서 신경 안쓰고 있다가(😅) 찾아보니 해당 문제되는 state 부분을 useEffect()로 묶어줘야 한다는 걸 알게 되었습니다.

 

제 코드에서 에러가 발생한 부분입니다.

function ShowContent({data,  setData, mark, setMark, setChatBtn}) {
  let [heartBtn, setHeartBtn] = useState(false);
  
  setData(data);  // <---- 이 부분!!!
  ...
}

 

그래서 저는 이렇게 해결했습니다.

function ShowContent({data,  setData, mark, setMark, setChatBtn}) {
  let [heartBtn, setHeartBtn] = useState(false);
  
  useEffect(()=>{
    setData(data);
  });
  ...
}

사실 아직 왜 이런 문제가 발생했고 useEffect()를 사용했을 때 해결이 되는지 잘 이해가 되지 않습니다.
그래서 관련된 서적을 찾아보고 반드시 이해해서 이 포스트를 수정할 겁니다!