본격 연동 #6. 비동기 데이터 로딩 시 UI 깜빡임 방지 (await & setTimeout 활용)으로 사용자 경험 증대

 

🔹 1. 문제 상황 및 개요 

📌 문제: 서버에서 데이터를 가져올 때 UI가 깜빡이는 현상 발생

• React에서 API 호출을 통해 데이터를 가져올 때, 데이터가 도착하기 전까지 UI가 올바르게 렌더링되지 않을 수 있음
• 예를 들어, goalAmount가 초기에는 null이지만, 서버 응답 후 100000으로 변경될 경우, 화면이 갑자기 변하면서 깜빡이는 현상이 발생할 수 있음
• 이러한 UI 깜빡임(Flash of Unstyled Content, FOUC)은 사용자 경험(UX)을 저하시킬 수 있음

 

참고로

FOUC (깜빡임)이 발생하는 조건

1. 비동기 요청의 응답이 지연되었을때 (await 없이 비동기 요청이 실행됬을때)

 

2. 상태 값이 비동기 응답 이후 변경될때

• useState()로 관리하는 값(goalAmount 등)이 비동기 응답 이후 업데이트될 경우, React가 다시 렌더링을 수행

• 렌더링이 반복되면서 UI가 “초기 상태 → 데이터가 채워진 상태”로 변화하면서 깜빡임이 발생함.

 

3. 조건부 렌더링 시, 상태가 다른 UI를 보여줄 경우

예를들면,

{goalAmount ? <p>현재 예산: {goalAmount}원</p> : <p>예산 데이터를 불러오는 중...</p>}

• 위와 같은 조건부 렌더링을 사용할 경우,

1. goalAmount가 null이면 "예산 데이터를 불러오는 중..."이 표시됨

2. 비동기 응답이 도착한 후 goalAmount가 업데이트되면 새로운 UI(현재 예산: 100000원)가 렌더링됨

3. UI가 갑자기 변경되면서 깜빡임이 발생함

 

4. setTimeout(), useEffect() 등이 데이터를 가져온 후 UI를 변경할 때

• useEffect()에서 fetchBudget()을 실행하고 데이터가 변경될 때 UI가 다시 렌더링됨

• 초기값(null)로 렌더링된 후, 데이터가 들어온 후 UI가 변경되면서 깜빡임 발생 가능

🛠 생각해낸 아이디어와 목표

✅ 비동기 요청이 끝날 때까지 await을 사용하여 데이터를 가져옴
✅ 데이터를 가져온 후 UI가 갑자기 변경되지 않도록 setTimeout()을 활용하여 자연스럽게 전환
✅ 로딩 중 상태를 추가하여 사용자에게 피드백을 제공하고 깜빡임을 최소화

---

🔹 2. 비동기 요청(await)을 통해 데이터가 준비될 때까지 기다리기

📌 await 없이 실행하면 발생하는 문제

const handleLogin = async (e) => {
  e.preventDefault();
  setLoading(true);

  try {
    const data = await login(email, password);
    localStorage.setItem('accessToken', data.data.accessToken);
    localStorage.setItem('refreshToken', data.data.refreshToken);

    setFetchingBudget(true);
    const budgetAmount = fetchBudget(); // ❌ `await` 없이 실행 → 응답이 도착하기 전에 다음 코드 실행됨
    setFetchingBudget(false);

    console.log('🏦 로그인 후 받은 예산 금액:', budgetAmount);

    // ❌ 데이터가 아직 없을 때 navigate 실행 → 잘못된 페이지 이동 가능성 있음
    navigate(budgetAmount !== null && budgetAmount > 0 ? '/main' : '/initial');
  } catch (error) {
    console.error('로그인 실패:', error);
  } finally {
    setLoading(false);
  }
};

⚠️ 문제점

1️⃣ fetchBudget()이 실행되었지만, 응답이 도착하기 전에 다음 코드(navigate())가 실행됨

2️⃣ goalAmount가 아직 null이므로, 잘못된 UI 상태에서 페이지가 변경될 가능성이 있음

3️⃣ 비동기 응답이 도착한 후 UI가 갑자기 변경되면서 깜빡이는 현상 발생

---

🔹 3. setTimeout() + await 활용하여 UI가 부드럽게 전환되도록 하기

✅ 올바른 코드 (await과 setTimeout을 사용하여 깜빡임 방지)

const handleLogin = async (e) => {
  e.preventDefault();
  setLoading(true);

  try {
    const data = await login(email, password);
    localStorage.setItem('accessToken', data.data.accessToken);
    localStorage.setItem('refreshToken', data.data.refreshToken);

    setModalMessage({
      type: 'success',
      message: '로그인 성공! 예산 데이터를 불러오고 있습니다!',
    });

    // ✅ 서버 응답을 기다릴 때 `await` 사용
    setFetchingBudget(true);
    const budgetAmount = await fetchBudget();
    setFetchingBudget(false);

    console.log('🏦 로그인 후 받은 예산 금액:', budgetAmount);

    // ✅ UI가 갑자기 변경되지 않도록 `setTimeout()`을 사용하여 자연스럽게 전환
    setTimeout(() => {
      navigate(budgetAmount !== null && budgetAmount > 0 ? '/main' : '/initial');
    }, 500);
  } catch (error) {
    console.error('로그인 실패:', error);
    setModalMessage({
      type: 'error',
      message: '로그인 실패! 다시 시도해주세요.',
    });
  } finally {
    setLoading(false);
  }
};

---

🔹 4. setTimeout()을 사용한 이유

✅ await으로 데이터를 가져오기	- goalAmount 값이 확실히 업데이트됨- null상태에서 UI가 렌더링되지 않음	- 데이터 로딩 시간이 길면 사용자가 응답을 느리게 체감할 수 있음
✅ setTimeout()으로 화면 전환 딜레이 추가	- goalAmount 값이 변경된 후 부드럽게 화면 전환됨- 깜빡임 방지 효과	- 너무 짧으면 효과가 없고, 너무 길면 UX 불편함 (500ms~700ms가 적절)

 

---

🚀 최종 결론

 비동기 요청(await fetchBudget())을 사용하면 데이터를 기다릴 수 있지만, React의 상태 변경 방식 때문에 UI가 깜빡일 수 있다.
 이러한 깜빡임을 방지하려면 setTimeout(500ms)을 추가하여 화면 전환이 부드럽게 이루어지도록 해야 한다.

 

사용자 경험 즉, UX를 고려하면 loading 상태를 추가하여 "로딩 중..."을 표시하는 것도 좋은 방법일 것 같긴하다만, 난 모달 메시지로 이를 처리헀다.

 

 

 즉, 서버에서 데이터를 가져온 후 UI에 반영할 때, await으로 데이터를 가져오고, setTimeout()을 활용하여 UI가 자연스럽게 전환되도록 하는 것이 사용자 입장에선 제일