React Native에서 모달과 네비게이션 타이밍 이슈 해결하기

발생한 문제

회원가입 성공 후 축하 모달을 보여주려고 했는데, 모달이 표시되자마자 가이드 페이지로 이동해버리는 문제가 발생했습니다.

문제가 발생한 코드

export const handleLogin = async ({ ... }) => {
  try {
    // 로그인 성공 후
    onSuccess?.();  // 모달 표시

    navigation.reset({  // 바로 Guide로 이동
      index: 0,
      routes: [defaultRoute],
    });

    return true;
  } catch (error) {
    // ...
  }
};

원인 분석

1. 로그인 함수에서 성공 시 두 가지 작업을 연속으로 실행:

   • onSuccess 콜백 (모달 표시)
   • navigation.reset (페이지 이동)

2. 페이지 이동이 너무 빨리 일어나서 사용자가 모달을 확인할 시간이 없었음

해결 방법

export const handleLogin = async ({ ... }) => {
  try {
    // ... 로그인 처리 ...

    // onSuccess가 있는 경우 네비게이션은 실행하지 않음
    if (!onSuccess) {
      navigation.reset({
        index: 0,
        routes: [defaultRoute],
      });
    }

    // 모달만 표시
    onSuccess?.();

    return true;
  } catch (error) {
    // ...
  }
};

개선된 사용자 경험

1. 회원가입 성공
2. 축하 모달 표시
3. 사용자가 "시작하기" 버튼 클릭
4. 가이드 페이지로 이동

배운 점

1. 실행 순서의 중요성

   • UI/UX에서 작업의 순서는 사용자 경험에 직접적인 영향을 미침
   • 특히 모달과 네비게이션이 함께 사용될 때 주의가 필요

2. 조건부 네비게이션

   • 상황에 따라 네비게이션 로직을 다르게 처리해야 할 수 있음
   • 콜백 함수의 존재 여부로 로직을 분기하는 패턴

3. 사용자 경험 고려

   • 기능이 정상 작동하더라도 사용자가 인지하고 반응할 시간을 고려해야 함
   • 자동화된 플로우에서도 사용자의 액션을 기다려야 하는 시점이 있음

결론

단순히 기능이 작동하는 것을 넘어서, 사용자가 각 단계를 인지하고 상호작용할 수 있도록 하는 것이 중요합니다.
네비게이션과 모달같은 UI 요소들의 실행 순서와 타이밍을 신중하게 고려해야 더 나은 사용자 경험을 제공할 수 있습니다.