코드를 보면 useEffect에 등록한 함수를 async 함수로 만들지 않고 내부에 async 함수를 따로 선언한 다음, 이를 호출해줬습니다. useEffect에 등록한 함수는 async 키워드를 붙이면 안 됩니다. useEffect에는 정리(cleanup)하는 기능이 있는데, 함수에서 Promise를 반환하면 이 기능과 충돌이 나기 때문입니다. 정리 기능은 컴포넌트가 언마운트되거나 컴포넌트가 업데이트되기 전에 특정 코드를 실행할 수 있는 기능으로, useEffect에서 함수 타입의 값을 반환하면 이 기능을 사용할 수 있습니다.

useEffect(() => {
  // 업데이트된 다음에 출력
  console.log(todos);
  return () => {
    // 업데이트되기 전에 출력
    // 여기서 todos는 업데이트되기 전의 값을 가리킵니다.
    console.log(todos);
  }
}, [todos])

추가로 useEffect를 사용해 컴포넌트 마운트 또는 언마운트 시 특정 작업을 하고 싶다면 useEffect의 두 번째 파라미터에 비어있는 배열을 사용하면 됩니다.

useEffect(() => {
  console.log('컴포넌트가 마운트될 때 출력됨');
  return () => {
    console.log('컴포넌트가 언마운트될 때 출력됨');
  }
}, [])

이 코드가 정말 마운트 또는 언마운트 시 잘 작동하는지 확인하고 싶다면 TodoItem에서 사용해보기 바랍니다. App 컴포넌트는 언마운트될 일이 없기 때문이죠.