리액트 네이티브에서 인증 함수 재사용 시 발생한 문제와 해결책

📌 문제 상황: 하나의 함수, 두 가지 다른 동작 요구

최근 개발 중인 농구 매칭 앱에서 흥미로운 문제 상황이 발생했습니다.
로그인 처리를 위한 handleLogin 함수를 두 가지 다른 상황에서 재사용하게 되었는데요:

1. 일반 로그인 화면: 사용자가 이메일과 비밀번호를 입력하여 로그인 시 성공하면 바로 메인 화면으로 이동
2. 회원가입 성공 후 자동 로그인: 회원가입 완료 후 자동 로그인 처리 시 성공 모달을 먼저 보여주고, 모달 닫기 버튼 클릭 시 가이드 화면으로 이동

이런 상황에서 문제가 발생했습니다. 회원가입 성공 후 자동 로그인 처리 시 성공 모달이 잠깐 표시되었다가 바로 메인 화면으로 넘어가버리는 것이었죠.

🔍 문제의 원인

문제의 원인은 handleLogin 함수의 구현에 있었습니다:

export const handleLogin = async ({
  email,
  password,
  navigation,
  axiosInstance,
  onError,
  onSuccess,
}: LoginParams): Promise<boolean> => {
  try {
    // API 호출 및 토큰 저장 로직...
    
    onSuccess?.();
    navigation.reset({
      index: 0,
      routes: [{ name: "MainTab" }],
    });
    
    return true;
  } catch (error) {
    // 에러 처리...
  }
};

성공 콜백(onSuccess)을 호출한 직후에 바로 화면 전환 코드가 실행되어, 모달이 표시되자마자 화면이 전환되는 문제가 발생한 것입니다.

💡 해결 방법: 동작 구분을 위한 옵션 파라미터 추가

이 문제를 해결하기 위해 shouldNavigate 옵션 파라미터를 추가했습니다:

interface LoginParams {
  // 기존 파라미터들...
  shouldNavigate?: boolean; // 추가된 옵션 파라미터
}

export const handleLogin = async ({
  // 기존 파라미터들...
  shouldNavigate = true, // 기본값은 true로 설정
}: LoginParams): Promise<boolean> => {
  try {
    // API 호출 및 토큰 저장 로직...
    
    onSuccess?.();
    
    // shouldNavigate 옵션에 따라 네비게이션 수행
    if (shouldNavigate) {
      navigation.reset({
        index: 0,
        routes: [{ name: "MainTab" }],
      });
    }
    
    return true;
  } catch (error) {
    // 에러 처리...
  }
};

🚀 사용 예시

// 일반 로그인 화면에서
const handleNormalLogin = async () => {
  await handleLogin({
    email,
    password,
    navigation,
    axiosInstance,
    shouldNavigate: true, // 기본값이므로 생략 가능
  });
};

// 회원가입 성공 후
const handleSignupComplete = async (data: TSignupForm) => {
  await handleLogin({
    email: data.email,
    password: data.password,
    navigation,
    axiosInstance,
    shouldNavigate: false, // 네비게이션 비활성화
    onSuccess: () => {
      setShowSuccessModal(true); // 대신 모달 표시
    },
  });
};

📝 배운 점

1. 함수 재사용 시 유연성 고려: 함수를 여러 상황에서 재사용할 때는 다양한 동작 방식을 지원할 수 있도록 설계해야 합니다.

2. 옵션 파라미터의 활용: 옵션 파라미터와 기본값 설정을 통해 기존 코드의 호환성을 유지하면서도 새로운 사용 케이스를 지원할 수 있습니다.

3. 네비게이션 로직 분리: 함수가 너무 많은 책임을 갖지 않도록, 특히 네비게이션 같은 UI 관련 동작은 옵션으로 제어할 수 있게 하는 것이 좋습니다.

이 경험을 통해 함수를 설계할 때 재사용성과 함께 유연성도 고려해야 한다는 점을 다시 한번 상기할 수 있었습니다.
단일 함수가 여러 컨텍스트에서 사용될 수 있음을 염두에 두고, 필요에 따라 동작을 조정할 수 있는 옵션을 제공하는 것이 중요합니다.