React Router: push와 replace의 차이점

 

history.push와 history.replace는 둘 다 React Router에서 경로를 변경할 때 사용하는 메서드지만, 동작 방식에 중요한 차이가 있다.

 

 

1. history.push

• 역사 기록에 새로운 항목을 추가한다.
• 사용자가 새로운 페이지로 이동한 것처럼 브라우저의 뒤로 가기 버튼을 통해 이전 페이지로 돌아갈 수 있다.

history.push('/new-route');s

 

 

특징

• 브라우저의 기록 스택에 새로운 항목을 추가하기 때문에, 사용자가 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 돌아갈 수 있다.
• 페이지 탐색을 할 때 일반적으로 사용하는 방식이다.

 

 

2. history.replace

• 현재 페이지의 URL을 대체한다.
• 역사 기록을 덮어쓰기 때문에 브라우저의 뒤로 가기 버튼으로는 대체하기 전의 페이지로 돌아갈 수 없다.

history.replace('/new-route');

 

 

특징

• 기록을 덮어쓰므로 현재 페이지를 완전히 대체한다.
• 뒤로 가기 버튼을 눌러도 대체된 이전 URL로 돌아갈 수 없다.
• 로그인 후 리디렉션이나 쿼리 파라미터만 변경할 때 자주 사용된다.

 

 

차이 요약

• push: 기록 스택에 새로운 항목을 추가해 뒤로 가기가 가능하다.
• replace: 현재 기록을 덮어써서 뒤로 가기가 불가능하다.