[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기

동기 작업을 기다리는 프로미스

---

프로미스는 모든 동기 작업을 완료한 후에 실행할 수 있다.

 

아래 예시에서 then 후속 처리 메서드에 넘긴 console.log는 절대 실행되지 않는다.

// 코드 참고 via 오늘의 프로그래밍
new Promise((resolve) => {
  console.log('1'); // 동기 영역
  resolve('2');
}).then(console.log); // 비동기 영역

let i = 0;
while (true) {
  i += 1;
}

 

프로미스 생성자에 넘긴 콜백 함수는 동기적으로 처리하므로 콘솔에 1을 출력한다. resolve 함수가 실행되면 프로미스는 이행(fulfilled) 상태가 되고 결과 값과 함께 새로운 프로미스를 리턴한다. 그럼 then 후속 처리 메서드로 실행 턴이 넘어간다. 여기서부터 비동기 영역이기 때문에 바로 실행되지 않는다.

 

프로미스 다음 코드엔 i를 1씩 증가시키는 무한 루프가 기다리고 있다. 이 무한 루프 때문에 then 후속 처리 메서드가 실행되지 않는 것이다. 이처럼 프로미스는 모든 동기 작업을 완료해야만 실행된다.

 

프로미스를 이용해 다음 턴으로 작업 미루기

---

같은 턴에 수행할 작업이 많다면 Async/Await를 사용하기 보단 프로미스를 이용해 다음 턴으로 미룰 수도 있다.

// 코드 참고 via 오늘의 프로그래밍
login() // TURN 1
  .then(() => {
    changeUI(); // TURN 2
    return updateProfile();
  })
  .then(() => {
    reloadPage(); // TURN 3
  });

 

위 코드는 아래 과정으로 실행된다. 각 턴(Turn)은 모든 동기 작업이 끝날 때까지 기다린다. 즉, 동기 작업을 마친 후 프로미스를 실행할 수 있는 타이밍이 왔을 때 비로소 실행된다.

1. [TURN 1] login() 실행
   ——— 동기 작업 실행 ———
2. [TURN 2] changeUI(), updateProfile() 실행
   ——— 동기 작업 실행 ———
3. [TURN 3] reloadPage() 실행

 

프로미스를 활용한 UX 개선

---

유저 정보, 결제 내역, 친구 목록을 보여주는 마이페이지가 있다고 가정해본다. 3개 모두 중요한 정보지만 마이페이지는 유저 정보를 우선적으로 보여주는 공간이다. 하지만 아래 예시에선 모든 데이터 Fetching을 완료해야만 불러온 정보를 사용자에게 표시할 수 있다. 첫 렌더링의 로딩 시간이 더 길이지는 셈이다.

// 코드 참고 via 오늘의 프로그래밍
function MyPage() {
  const [userInfo, setUserInfo] = useState(null);
  const [billHistory, setBillHistory] = useState([]);
  const [friendsList, setFriendsList] = useState([]);

  useEffect(() => {
    (async () => {
      const userInfoData = await fetchUserInfo();
      const billHistoryData = await fetchBillHistory();
      const friendsListData = await fetchFriendsList();

      setUserInfo(userInfoData);
      setBillHistory(billHistoryData);
      setFriendsList(friendsListData);
    })();
  }, []);

  // ...
}

 

then 메서드를 활용해 유저 정보를 불러오는 fetchUserInfo를 먼저 실행하도록 수정하면, 결제 내역과 친구 목록에 대한 데이터 Fetching을 첫 렌더링에서 제외시킬 수 있다. 그럼 사용자는 유저 정보를 조금 더 빨리 볼 수 있게 된다. then 메서드의 콜백은 API 호출 이후 모든 동기 작업을 완료한 시점에 실행된다.

// 코드 참고 via 오늘의 프로그래밍
function MyPage() {
  const [userInfo, setUserInfo] = useState(null);
  const [billHistory, setBillHistory] = useState([]);
  const [friendsList, setFriendsList] = useState([]);

  useEffect(() => {
    fetchUserInfo().then(async (userInfoData) => {
      // 데이터 Fetching 이후 모든 동기 작업을 완료하면 실행 ↓
      setUserInfo(userInfoData);

      const billHistoryData = await fetchBillHistory();
      const friendsListData = await fetchFriendsList();
      setBillHistory(billHistoryData);
      setFriendsList(friendsListData);
    });
  }, []);

  // ...
}

 

💡 setUserInfo 디스패치 호출을 await fetchUserInfo 바로 다음 라인으로 이동시키는 방법도 있다. 결과는 동일하지만 동기 작업 컨트롤은 then을 사용했을 때가 더 용이하다.

 

레퍼런스

---

프로미스를 제대로 알고 사용하기

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요