728x90
*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다.
history.push()와 history.replace()의 차이점
라우팅 변경을 위해 가장 빈번히 사용되는 메소드 중 history.push()와 history.replac()의 차이점은 무엇일까?
Home > A > B > C 순으로 페이지 이동을 할 때,
B에서 history.push()를 사용하면
import React from 'react';
function B({ history }) {
history.push('/C');
return <div>B</div>;
}
export default B;
Home > A > B > C 순으로 history에 쌓여, 마지막 페이지에서 뒤로가기 버튼을 누르면 B 페이지로 되돌아간다.
똑같이 Home > A > B > C 순으로 페이지 이동을 하는데,
B에서 history.replace()를 사용하면
import React from 'react';
function B({ history }) {
history.replace('/C');
return <div>B</div>;
}
export default B;
Home > A > C 순으로 history에 쌓여, 마지막 페이지에서 뒤로 가기 버튼을 누르면, A 페이지로 되돌아간다.
즉, history를 스택이라고 생각했을 때, push는 쌓여 있는 history 위에 쌓는 것이고, replace는 쌓여 있는 history 제일 위의 원소와 현재 넣는 원소를 말 그대로, replace(대체)하는 것이다.
728x90