React의 useEffect에 대한 비동기 함수의 React Hook 경고: useEffect 함수는 정리(clean up) 함수 또는 아무것도 반환해야 합니다.

나는 아래와 같은 useEffect 예제를 시도해보았습니다:

useEffect(async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

그리고 콘솔에서 다음과 같은 경고 메시지를 받았습니다. 그러나 비동기 호출에 대한 정리는 선택 사항이라고 생각합니다. 왜 이 경고 메시지가 나타나는지 정확히는 모르겠습니다. 예제를 위한 샌드박스 링크를 제공합니다. https://codesandbox.io/s/24rj871r0p

답변 1

리액트 18에서는 Relay, Next.js, Hydrogen 또는 Remix와 같은 강경한 프레임워크에서 데이터 가져오기에 Suspense를 사용할 수 있습니다. Suspense를 사용한 임시적인 데이터 가져오기는 기술적으로 가능하지만, 일반적인 전략으로 권장되지는 않습니다.

프레임워크의 일부가 아닌 경우, swr과 같은 라이브러리를 시도해 볼 수 있습니다.

Suspense가 작동하는 간단한 예제입니다. Suspense가 잡을 수 있는 promise를 던져야하며, fallback 컴포넌트를 먼저 표시하고 promise가 해결될 때 Main 컴포넌트를 렌더링해야 합니다.

let fullfilled = false;
let promise;
const fetchData = () => {
  if (!fullfilled) {
    if (!promise) {
      promise = new Promise(async (resolve) => {
        const res = await fetch('api/data')
        const data = await res.json()
        fullfilled = true
        resolve(data)
      });
    }
    throw promise
  }
};
const Main = () => {
  fetchData();
  return <div>로딩 완료됨</div>;
};
const App = () => (
  <Suspense fallback={로딩 중...}>
    <Main />
  </Suspense>
);

답변 2

리액트 훅스(React Hooks)를 사용할 때 useEffect에서 비동기 함수를 사용하는 경우 경고 메시지가 발생할 수 있습니다. 이 경고 메시지는 useEffect 함수가 정리(clean-up) 함수를 반환하거나 아무런 값도 반환하지 않아야 한다는 것을 알려줍니다. 이번 글에서는 useEffect에서 비동기 함수를 사용할 때 발생하는 경고 메시지와 이에 대한 대응 방법에 대해 알아보겠습니다.
리액트 훅스는 함수형 컴포넌트에서 상태 관리를 쉽게 할 수 있도록 도와주는 기능입니다. useEffect는 컴포넌트가 렌더링될 때 또는 특정 상태가 변경될 때 실행되는 함수를 정의하는데 사용됩니다. 예를 들어, API 호출이나 데이터 변경과 같은 비동기 작업을 처리하는 데 사용할 수 있습니다.
그러나 이때 useEffect에서 비동기 함수를 사용하는 경우 경고 메시지가 발생할 수 있습니다. 이 메시지는 useEffect에서 반환된 값이 정리 함수나 아무런 값도 반환하지 않을 경우 발생하는데, 이는 리액트가 이후에 실행될 때 메모리 누수(memory leak)의 가능성이 있다고 판단하기 때문입니다.
이러한 경고 메시지를 해결하는 방법은 간단합니다. useEffect 함수 내에서 async 키워드를 사용하는 비동기 함수를 작성한 경우 해당 함수를 일반적인 함수로 감싸주거나, useEffect 함수 외부에 정의한 async 함수를 호출하는 방식을 사용하면 됩니다. 예를 들면 다음과 같습니다.
```
useEffect(() => {
const fetchData = async () => {
// 비동기 작업을 수행하는 코드
};

fetchData();

return () => {
// 정리 함수 (옵션)
};
}, []);
```
이와 같이 async 함수를 정의하고, 해당 함수를 useEffect 내에서 호출하면 useEffect 함수를 정상적으로 사용할 수 있습니다. 만약 정리 함수가 필요하다면, useEffect 함수의 반환값으로 정리 함수를 제공해주면 됩니다.
결론적으로, useEffect 함수에서 비동기 함수를 사용할 때 발생하는 경고 메시지를 해결하는 방법은 async 함수를 감싸거나 외부에서 호출하는 것입니다. 이를 통해 리액트 훅스를 효과적으로 사용하면서도 메모리 누수와 같은 문제를 예방할 수 있습니다.