useEffect에서 async/await 사용법

useEffect must not return anything besides a function, which is used for clean-up.

위와 같이 useEffect안에서 clean-up함수를 필요로하다는 에러를 보였다.

처음에는 return으로 unmount할 때 실행을 해주지 않아서일까?

deps인자를 주어야하는데, 주면은 화면이 아예 뜨지 않으면서 여러 에러들을 발생했었다.

하지만, 에러 코드에 설명이 나와있었다.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

현재 나는 useEffect에서 async await를 사용하여 axios를 이용하였다.

useEffect(async () => {
    try {
      const res = await axios.get("<http://localhost:8080/todos>", {
        headers: {
          Authorization: token,
        },
      });
      setTodos(res.data.data);
    } catch (err) {
      console.error(err);
    }
  }, []);

에러를 읽어보니,

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

위와 같은 방법으로 코드를 짜기를 권유하고 있었다.

useEffect(() => {
    async function fetchData() {
      await axios
        .get("<http://localhost:8080/todos>", {
          headers: {
            Authorization: token,
          },
        })
        .then((res) => {
          setTodos(res.data.data);
        });
    }
    fetchData();
  }, [todos]);

그래서 위처럼 수정하였다.

useEffect에서 async await를 사용할 때 함수를 async await로 선언하여, 그 함수를 useEffect안에서 실행할 수 있도록 선언을 해주어야 했다.

현재, 나는 투두리스트 api를 찌르고 있었기 때문에, todos가 변하면 useEffect안의 함수를 다시 실행할 수 있도록 todos를 두번째 인자에 넣어주었다.