React Native 네비게이션: navigation.reset()으로 상태 초기화하기

React Native에서 React Navigation 라이브러리를 사용해 화면 전환을 구현할 때, navigation.navigate()와 navigation.reset()의 차이를 정확히 이해하는 것은 매우 중요합니다. 이 두 메서드의 작동 방식을 잘못 이해하면, 스택 관리 문제나 상태 초기화와 관련된 예기치 않은 문제를 초래할 수 있습니다. 이 글에서는 두 메서드의 동작 방식을 비교하고, 특정 상황에서 어떤 방법이 적합한지 알아보겠습니다.

 

1. navigation.navigate

navigation.navigate()는 네비게이션 스택에 새로운 화면을 추가하는 방식으로 동작합니다. 새로운 화면이 현재 스택 위에 쌓이며, 이전 화면은 그대로 유지됩니다.

주요 특징

• 새로운 화면 추가: 현재 스택에 새로운 화면을 추가합니다.
• 상태 유지: 이전 화면의 상태와 컴포넌트가 그대로 유지됩니다.
• 뒤로가기 가능: 스택에 남아 있는 이전 화면으로 이동할 수 있습니다.

사용 사례

• 사용자가 이전 화면으로 돌아갈 가능성이 있을 때.
• 이전 화면의 상태가 유지되어야 할 때.

navigation.navigate('Profile', { userId: 123 });

 

단점

• 스택이 계속 쌓이므로, 화면 전환이 잦은 경우 메모리 관리 및 성능 문제가 발생할 수 있습니다.
• 상태 초기화가 필요할 경우 적합하지 않습니다.

 

---

2. navigation.reset

navigation.reset()은 현재 네비게이션 스택을 완전히 초기화하고, 새 경로로 시작합니다. 이전 화면들은 모두 제거되며, 새 화면이 스택의 첫 화면으로 설정됩니다.

주요 특징

• 스택 초기화: 기존 스택의 모든 화면이 제거됩니다.
• 상태 초기화: 이전 화면의 상태와 컴포넌트가 언마운트됩니다.
• 뒤로가기 불가: 새로운 화면이 첫 번째 화면이므로 이전 화면으로 돌아갈 수 없습니다.

사용 사례

• 홈 화면으로 돌아가며 이전 화면들을 모두 제거하고 싶을 때.
• 로그아웃 후 앱 초기화가 필요할 때.
• 상태를 완전히 초기화해야 하는 경우.

navigation.reset({
  index: 0, // 첫 화면으로 설정
  routes: [{ name: 'Home' }], // 이동할 화면
});

위 코드는 스택을 초기화하고 "Home" 화면으로 이동합니다.

장점

• 스택 관리가 간단해지고, 메모리 누수를 방지할 수 있습니다.
• 이전 화면의 상태와 컴포넌트가 완전히 정리됩니다.

---

3. useEffect와 클린업 함수의 실행 차이

React의 useEffect는 컴포넌트의 생명주기에 따라 동작하며, 화면이 언마운트될 때 클린업 함수를 실행합니다.

 

useEffect(() => {
  console.log('컴포넌트가 마운트됨');

  return () => {
    console.log('컴포넌트가 언마운트됨'); // 화면이 언마운트될 때 호출
  };
}, []);

 

 

---

 

4. 정리: 언제 어떤 메서드를 사용할까?

상황navigatereset

새로운 화면을 추가할 때	O	X
이전 화면으로 돌아가야 할 때	O	X
홈 화면으로 돌아가야 할 때	X	O
상태를 초기화해야 할 때	X	O
스택 관리를 간소화하고 싶을 때	X	O

결론

• 화면 전환이 단순히 새 화면 추가를 목적으로 한다면 navigation.navigate()를 사용하세요.
• 상태 초기화나 스택 관리를 간소화하려면 navigation.reset()을 선택하세요.

두 메서드 모두 올바른 상황에서 사용하면 매우 유용하며, 각자의 목적에 맞게 활용하는 것이 중요합니다. 화면 전환 문제를 해결하기 위해 상태 초기화가 필요할 경우, reset()이 적합한 대안이 될 수 있습니다.

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.