React Navigation의 reset: 네비게이션 스택을 새롭게 시작

reset이란?

React Navigation의 reset은 현재의 네비게이션 상태를 완전히 새로운 상태로 교체하는 메서드.
기존의 모든 화면 이력을 지우고 새로운 네비게이션 상태를 설정할 수 있음.

reset을 사용하는 주요 상황

1. 로그인/로그아웃 처리

   • 로그인 성공 후 이전 화면으로 돌아갈 수 없게 할 때
   • 로그아웃 시 모든 화면 스택을 초기화할 때

2. 온보딩 완료

   • 앱 최초 실행 시 온보딩 화면을 보여주고 완료 후 메인으로 이동할 때

3. 깊은 단계의 네비게이션에서 홈으로 이동

   • 특정 작업 완료 후 모든 이력을 지우고 홈 화면으로 돌아갈 때

기본 사용법

// 단일 화면으로 리셋
navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }]
});

// 여러 화면으로 리셋
navigation.reset({
  index: 1, // 현재 활성화될 화면의 인덱스
  routes: [
    { name: 'Home' },
    { name: 'Profile' }
  ]
});

reset vs navigate vs replace

• navigate: 새 화면을 스택에 추가하며, 뒤로 가기가 가능
• replace: 현재 화면만 교체하며, 이전 이력은 유지
• reset: 모든 네비게이션 이력을 지우고 새로 시작

실제 사용 예시

// 로그인 성공 시
const handleLoginSuccess = () => {
  navigation.reset({
    index: 0,
    routes: [{ name: 'MainTab' }]
  });
};

// 로그아웃 시
const handleLogout = () => {
  navigation.reset({
    index: 0,
    routes: [{ name: 'Login' }]
  });
};

주의사항

1. index는 routes 배열의 범위를 벗어나지 않아야 함
2. 최소한 하나의 route는 지정해야 함
3. 파라미터가 필요한 화면의 경우 params 객체를 함께 전달해야 함

성능 고려사항

reset은 전체 네비게이션 상태를 교체하는 무거운 작업.
일반적인 화면 전환에는 navigate를 사용하고 reset은 필요한 경우에만 사용.