Woowahan-TS / woowahan-ts

우아한 타입스크립트 스터디
5 stars 1 forks source link

[9장] useEffect 에 비동기 함수를 전달할 수 없는 이유에 대해서 설명해주세요. #62

Open hyejj19 opened 3 weeks ago

hyejj19 commented 3 weeks ago

📝 290p

🧐 useEffect 는 첫번째 인자로 Promise 를 반환하지 않는 일반 함수를 받습니다. 비동기 함수를 허용하지 않는 이유는 무엇이며, 이를 해소하기 위해 어떤 방법을 사용하면 좋을지 의견을 주세요.

저의 답변은... 비동기 함수란 언제 작업이 완료될지 알 수 없는 함수이기도 합니다. 따라서 결과를 예측하기가 어렵기 때문에, 한 번의 변화 (리렌더링, 의존성 배열의 값 변화 등)에 대해 한 번의 함수를 동기적으로 호출/실행하여 변화의 흐름을 관리하고자 이런 방식을 채택했습니다.

만일 useEffect 내에서 비동기 작업이 필요하다면,

  1. 함수를 일반 함수로 감싸고 그 안에서 비동기를 호출하거나
  2. 비동기 함수를 따로 정의해 callback 안에서 호출되도록 할 수 있습니다.

    useEffect(() => {
    const fetchData = async () => {
    try {
      const response = await someAsyncFunction();
      // 데이터 처리
    } catch (error) {
      console.error(error);
    }
    };
    
    fetchData();
    }, [dependency]);