[React Native] navigate와 replace 메서드의 차이 (react-navigation)

navigate와 replace 메서드의 차이 (react-navigation)

들어가며

• 리액트 네비게이션(React Navigation)에서 @navigate@ 메서드와 @replace@ 메서드의 차이를 간단하게 정리해본다.

 

차이

navigate 메서드

기능

• 새로운 화면을 스택(Stack)에 추가한다.
• 현재 화면 위에 다른 화면을 쌓는(push) 방식이다.

 

결과

• 이전 화면으로 뒤로 가기(back) 할 수 있다.
• 뒤로 가기 버튼(←)이 자동으로 생긴다. (Stack Navigator 기준)

 

사용 예시

navigation.navigate('Signup');

 

replace 메서드

기능

• 현재 화면을 새 화면으로 교체(replace)한다.
• 이전 화면을 스택에서 제거하고, 새 화면으로 바꾼다.

 

결과

• 이전 화면으로 뒤로 가기 할 수 없다.
• 스택에 이전 화면이 없으므로 뒤로 가기 버튼이 없다.

 

사용 예시

navigation.replace('Signup');

 

정리

항목	navigate	replace
동작 방식	스택에 새 화면 추가	현재 화면을 새 화면으로 대체
뒤로 가기 가능	가능 (← 버튼 자동 제공)	불가능 (← 버튼 없음)
사용 예	로그인 후 → 홈 화면 등	스플래시 화면 후 → 로그인/홈 화면 등
UX 흐름	사용자가 이전 화면으로 돌아갈 수 있도록 허용	이전 화면으로 돌아가면 안 되는 경우에 적합

 

참고 사이트

useNavigation | React Navigation