[React] 비동기함수 반환값을 프로미스(promise)가 아닌 실제값으로 리턴하는 방법

기본 개념

1. 비동기 함수는 항상 Promise 객체를 반환한다.

2. 비동기 함수의 return 문은 해당 Promise 객체가 해결되거나 거부될 때 반환할 값을 결정한다.

const fetchData = async () => {
  const data = await getDocs(collection(db, "users"));
  return data;
};

const data = fetchData();
console.log(data); // >> 프로미스 객체가 출력된다.

 

예시 상황

FE개발자 A가 Firestore(DB)를 사용하고 있다.

A는 DB에서 모든 유저 데이터를 가져와 1차원 배열로 반환하는 커스텀훅(또는 모듈)을 개발한다. 

const useGetAllUser = async () => {
    const querySnapshot = await getDocs(collection(db, "users")); // DB에서 데이터 읽기
    const userList = []; // 읽은 데이터를 담을 배열
    
    // querySnapshot을 순회하며 요소들을 users 배열에 담는다.
    querySnapshot.forEach((doc) => {
      const userData = doc.data();
      userList.push(userData);
    });
  
    // 모든 유저의 데이터가 담긴 배열인 users를 리턴한다.
    return userList;
};

커스텀훅 개발을 마친 A가 테스트를 진행한다.

const users = useGetAllUser();
console.log(users); // >> 프로미스 객체가 출력된다

이 때 커스텀훅의 return 값이 프로미스 객체라는 것을 깨닫게된다.

 

A는 어떻게해야 해당 커스텀훅의 반환값 형식을 1차원 배열 형식으로 리턴할 수 있을지 고민한다.

방법은 간단했다.

1. 비동기함수로 데이터를 받아오는 코드 부분을 커스텀훅 내부에서 함수로 정의한다.

2. useState를 통해 해당 비동기함수에서 불러온 데이터를 대입한다.

3. 커스텀훅은 state값을 리턴한다.

즉, 기존 비동기함수를 새로운 함수로 정의하고 리턴값이었던 변수를 state를 이용해 상태변화 시킨 후 커스텀훅에서는 해당 상태를 리턴하면 된다.

const useGetAllUser = () => {
  const [users, setUsers] = useState([]);


  const fetchData = async () => {
    const querySnapshot = await getDocs(collection(db, "users")); // DB에서 데이터 읽기
    const userList = []; // 읽은 데이터를 담을 배열
    
    // querySnapshot을 순회하며 요소들을 users 배열에 담는다.
    querySnapshot.forEach((doc) => {
      const userData = doc.data();
      userList.push(userData);
    });
  
    // 모든 유저의 데이터가 담긴 배열인 users를 state에 대입한다.
    setUsers(userList);
  };
  
  // 모든 유저의 데이터가 담긴 배열인 users를 state에 대입한다.
  return { users };
};

const { users } = useGetAllUser();
console.log(users); // 1차원 배열 형식으로 데이터가 출력된다.