useEffect에서 비동기 함수를 사용하는 방법은 무엇입니까?

React에서 우리 모두는 DOM 업데이트를 수행한 후 실행되고 렌더링 후 일부 작업을 수행하는 데 도움이 되는 useEffect 후크를 사용해야 합니다.

useEffect 내에서 비동기 호출을 수행하는 다양한 방법을 탐색하기 전에 그 이면에 있는 문제에 대해 논의해 봅시다.

useEffect와 함께 비동기 키워드를 사용하면 안 되는 이유는 무엇입니까?

이를 이해하기 위해 예를 들어보자.

const [state, setState] = useState(0)

useEffect(async () => {
    await setState((state) => state + 1);
}, []);

위의 코드는 비동기 함수가 약속을 반환하고 useEffect가 약속을 반환할 콜백 함수를 기대하지 않기 때문에 오류를 발생시킵니다. 아무 것도 반환하지 않거나 함수를 반환해야 합니다.

useEffect 내에서 어떻게 비동기 함수를 호출할 수 있습니까? 🤔

useEffect 후크 내에서 비동기 호출을 만들기 위해 다음 접근 방식을 사용할 수 있습니다.

useEffect 내에서 비동기 함수를 정의합니다.

 useEffect(() => {
   const fetchData = async()=> {
     const data = await getData()

     return data
   }
   fetchData()
 }, []);

useEffect 외부에서 비동기 함수를 정의합니다.

  const [state, setState] = useState(0)

  const fetchData = useCallback(async()=> {
    const data = await getData();
    setState(data)
  }, [])

  useEffect(() => {
    fetchData()
  }, [fetchData]);

이 경우 비동기 함수를 useCallback으로 래핑하여 종속성 배열과 매핑해야 합니다.

참고 - useCallback 후크를 사용하여 함수를 래핑하지 않으면 업데이트할 때마다 다시 렌더링되어 useEffect 후크가 다시 트리거됩니다.

useEffect와 함께 비동기 함수를 사용하기 위해 이 두 가지 접근 방식을 사용했습니다. 이 주제와 관련하여 중요한 점이나 다른 접근 방식을 자유롭게 추가하십시오. 🙌🏻

행복한 학습! 👩🏻‍💻