[21.11.11] 에러핸들링 (김지윤) - setTimeout 내에서 setState를 사용해도 useEffect가 작동 안 됨

[jacobways]

문제 상황 및 에러 로그

• 상황 : setTimeout 내에서 setState를 실행해서 state를 변경해도, useEffect 가 작동 안 됨

  
  const [eventStatus, setEventStatus] = useState(false);

const createCareer = () => { axios .post( ${process.env.REACT_APP_SERVER_URL}/career, { jobSeekerId, company, period, position: careerPosition, }, { withCredentials: true } ) .then((res) => { setEventStatus(!eventStatus) // setTimeout 외부 setState 사용

  setTimeout(()=>{
    axios.delete(`${process.env.REACT_APP_SERVER_URL}/career/${res.data.id}`, {withCredentials: true})
    .then((res)=>{
      setEventStatus(!eventStatus)  // setTimeout 내부 setState 사용
    })
  }, 300000)
})
.catch((err) => {
  console.log(err);
});

};

useEffect(() => { // 함수 코드 }, [eventStatus])

## 원인 및 해결방안
- 원인
  - setState를 setTimeout 밖에서 이미 사용함
  - 따라서 setTimeout 내부의 setState는 state를 변경시키지 못함 (이미 위에서 변경되었기 때문)
  - state가 변경되지 않으므로, useEffect가 작동되지 않음

- 해결방안 : 다른 Hook를 선언하고, 이를 setTimeout 내에서 사용하기
```js
const [eventStatus, setEventStatus] = useState(false);
const [eventSetTimeout, setEventSetTimeout] = useState(false);  // 추가로 state 선언

const createCareer = () => {
  axios
    .post(
      `${process.env.REACT_APP_SERVER_URL}/career`,
      {
        jobSeekerId,
        company,
        period,
        position: careerPosition,
      },
      { withCredentials: true }
    )
    .then((res) => {
      setEventStatus(!eventStatus)

      setTimeout(()=>{
        axios.delete(`${process.env.REACT_APP_SERVER_URL}/career/${res.data.id}`, {withCredentials: true})
        .then((res)=>{
          setEventSetTimeout(!eventSetTimeout);  // 추가로 선언된 setState 사용
        })
      }, 300000)
    })
    .catch((err) => {
      console.log(err);
    });
};

useEffect(() => {
  // 함수 코드
}, [eventStatus, eventSetTimeout])  // 종속성 배열에 새로 선언된 state를 엘리먼트로 추가