[Hooks] useEffect 비동기 사용하기

useState가 포함된 코드 - 동기 처리

• Executing async code on update of state with react-hooks

전부터 이슈가 있었던 state 변동 후 코드 실행에 대해서 한참을 검색해봤지만, 결국 정석적인 방법은 useEffect로 결론났다. (async-await와 상관이 없었다.) 즉 state가 변화된 이후에 진행되어야 한다면 다음과 같이 작성해야 한다.

useEffect(() => {
  // any값이 변화된 이후 진행되야 하는 코드
}, [any]);

(중략)

const trigger = () => {
setAny("ex");
}

useEffect 내부에서 비동기 처리하기

• [react] useEffect 훅에서 async await 함수 사용하기

(위의 링크에 정말 잘 정리되어 있다!) useEffect는 항상 함수를 반환해야 한다. 따라서 async-await를 섣불리 사용하면 이 함수들은 프로미스를 반환하기 때문에 에러가 발생한다.

useEffect(() => {
async function ex() {
  const A = await 비동기함수;
  console.log(A);
}
  ex();
}, [])

이렇게 작성해야 한다! useEffect 내부에 함수를 만들고 이를 실행해주면 된다.