[TIL] 2023.11.11 - 트러블 슈팅(프로필 사진 put 적용 이슈)

 트러블 슈팅(프로필 사진 put 적용 이슈) 

① 문제

• 마이페이지 프로필 사진을 수정하지 않았는데도 사진 수정 API가 동작함.
• 사진을 수정할 때도 API가 두번 동작함.

② 원인

• useEffect가 1) 컴포넌트가 마운트될 때, 2) 이미지 수정 시 useState가 업데이트 될 때, 두번 실행돼서 발생함.

③ 해결

• 이미지 업데이트와 관련된 useState를 새로 생성해서, true일때만 수정이 동작하도록 useEffect를 수정함.

const [isUpdate, setIsUpdate] = useState(false); // 사진 업데이트 상태

useEffect(() => {
    // 컴포넌트가 마운트 될 떄
    // upLoadImage가 변경될 떄
    if (isUpdate) {
      putUpdateProfileHandler();
    }
    setIsUpdate(false);
  }, [uploadImage]);