🐕 useEffect안의 콜백함수는 항상 함수를 반환해야한다.
하지만 async 함수는 프로미스를 반환하기 때문에
useEffect(async () => {})
이와 같은 형식으로 작성하는 경우
useEffect는 반환문으로 함수를 반환해야하지만
프로미스를 반환하게 되어 오류를 만나게 될 가능성이 높아집니다.
👻그럼 async는 어떻게 씀
useEffect(() => {
const process = async () => {
setLoading(true);
try {
const resolved = await promiseCreator();
setResolved(resolved);
} catch (e) {
setError(e);
}
setLoading(false);
};
process();
// eslint-disable-next-line react-hooks/exhaustive-deps
}
이런식으로 useEffect의 매개변수로 들어갈 콜백함수 내부에서
async 함수를 정의해주고 async 함수를 호출해주면 됩니다.
거기에 try catch문까지 곁들여 사용하면 더 좋겠죵
반응형
'react' 카테고리의 다른 글
react-virtualized 를 사용한 렌더링 최적화를 해보자 (0) | 2023.04.06 |
---|---|
리액트의 Context API를 알아보자.. (0) | 2023.04.04 |
리액트의 SPA (SIngle Page Application) (0) | 2023.03.28 |
리액트의 성능을 최적화 해보자 프로젝트 (0) | 2023.03.27 |
라이프사이클 메서드 폼 미쳤다. (5) | 2023.03.21 |