useEffect 내에서 async/await 사용하기

앱을 종료 후 다시 실행할 때, 토큰이 있으면 자동 로그인이 되도록 코드를 구현하는 과정에서
useEffect 내에서는 async/await 구문을 사용하지 못 한다는 것을 알게 되었다.

따라서 아래와 같은 형태의 코드는 사용할 수 없다.

useEffect(async () => {
  const data = await getdata();
  setUser(data);
}, []);

useEffect 내에서 async/await 구문을 사용할 수 없는 이유는 다음과 같다.

useEffect는 콜백 함수가 아무것도 반환하지 않거나 clean-up function을 반환해야 하는데,
콜백 함수 내에서 async/await 구문을 직접 사용하면
자동으로 함수를 비동기 함수로 전환하고 Promise를 반환하기 때문에
useEffect hook의 동작과 충돌하여 예기치 않은 문제가 발생할 수 있기 때문이다.

따라서 useEffect 내에서 async/await 구문이 작동하도록 하려면 내부에 별도의 함수를 정의하고 즉시 호출하는 방법을 사용해야 한다.

useEffect(() => {
  const fetchData = async () => {
    const data = await getdata();
    setUser(data);
  };
  fetchData();
}, []);

실제로 프로젝트 내에서 구현한 코드는 다음과 같다.

useEffect(() => {
  	// getTokenAndRefreh라는 별도의 함수를 정의
    const getTokenAndRefresh = async () => {
      try {
        const token = await EncryptedStorage.getItem('refreshToken');
        // 만약 토큰이 없다면 함수 종료
        if (!token) {
          return;
        }
        // refreshToken을 사용하여 서버에 요청
        const response = await axios.post(
          `${Config.API_URL}/refreshToken`,
          {},
          {
            headers: {
              authorization: `Bearer ${token}`,
            },
          },
        );
        // 서버로부터 받은 응답을 사용자 정보로 업데이트
        dispatch(
          userSlice.actions.setUser({
            name: response.data.data.name,
            email: response.data.data.email,
            accessToken: response.data.data.accessToken,
          }),
        );
      } catch (error) { // 에러 처리
        console.error(error);
        // 만료된 경우
        if ((error as AxiosError).response?.data.code === 'expired') {
          Alert.alert('알림', '다시 로그인 해주세요.');
        }
      }
    };
    getTokenAndRefresh(); // 함수를 호출
  }, [dispatch]);