useEffect 내부에서 async, await 을 사용하자

TOC

1. destory error와 문제점 찾기

2. 해결

1. destory error와 문제점 찾기

useEffect callback 함수에서 async await을 사용하는 경우 destory is not a function이라는 에러를 만나게 된다.

const url = 'http://127.0.0.1:8000/api/posts/'
const PostListContextProvider = (props) => {
    const [posts, setPosts] = useState([])
    useEffect(async () => {
        const {data} = await axios.get(url);
        setPosts(data)
    }, [posts]);
    return (
        <PostListContext.Provider value={ posts }>
            { props.children }
        </PostListContext.Provider>
    );
}

출처 : https://www.python2.net/questions-773781.htm

위와 같은 코드가 있다고 가정하였을 때 useEffect의 callback 함수를 async로 덮어버리는 경우 에러가 발생하게 된다.

async await은 promise 객체를 반환하게 되는데 useEffect는 promise 값을 받게되어 에러가 발생한 것이다.

2. 해결

해결방법은 간단하다. callback 함수에 바로 async를 주는 것이 아닌 callback 함수로 함수 내부에 async, await을 선언한 함수를 반환해주는 것이다.

여기서 주의할 점은 함수 내부에 함수를 준 것이므로 내부 함수는 실행시켜 주지 않으면 작동하지 않는다는 것이다.

useEffect(()=>{(async ()=> console.log('innerFunction'))()})

이런식으로 promise가 아닌 함수를 넘겨주는 형태로 바꾸어 준다면 useEffect 내부에서도 비동기 처리가 가능해진다.