👨‍💻 사건

• 팀프로젝트 중 게시물 작성 부분에서 To locate the bad setState() call inside… 이 node 환경에서 warning으로 발생하여 해결해 보고자 하였다.

✅ 해결

부모요소로 props를 전달하기 위해 받아온 setState 함수가 useEffect로 관리가 안되어지고 있어서 발생한 warning 문구였다. 그래서, useEffect를 통하여 관리를 하니 warning 문구가 사라졌다.

const ImageUploadButton = ({ className, setUploadImg, uploadImg, inputRef }) => {
  ...
  setUploadImg(image);
	...

const ImageUploadButton = ({ className, setUploadImg, uploadImg, inputRef }) => {
  ...
  useEffect(() => {
    setUploadImg(image);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [image]);
	...

💭 개선

Error 가 아닌, warning 이라도 잘 살펴보고 트러블슈팅하는 자세를 가지는것이 중요하다는 것을 깨닫게 됩니다.