TIL 36 Redirect, History.push, Link

참고 블로그

React Router에서 구분이 애매한 Redirect, History, Link에 대해 알아보자.

History.push

• 자바스크립트에서 쓰이는 History 객체
  • brower.history()
    • 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체
  • window.history()
    • 윈도우의 열람 이력을 최근에 방문한 URL의 배열로 반환
    • DOM의 window 객체는 history 객체를 통해 브라우저 히스토리에 접근할 수 있음
• 자바스크립트에서 세션 히스토리를 관리하기 위한 여러 가지 구현을 제공
• history.push("/login") 와 같이 사용
• JSX에서 쓸 수 없다.(내가 이 글을 쓰게 된 이유)

const Test = () => {
  
  	const [loginToggle, setLoginToggle] = useState(true);
	const handleLoginButton = () => {
		setLoginToggle(!loginToggle); // 로그인을 한다면
      	history.push("/login"); // 이와 같이 routing된 url로 연결할 수 있다.
      	
	}
	return (<Button onClick={handleLoginButton}>Login Button</Button>)

}

• props를 통해 상위 컴포넌트로부터 history 객체를 전달받을 수 있다.(BrowerRouter와 Route를 사용한 경우, 라우팅된 페이지의 최상위 컴포넌트에는 props를 통해 history객체가 자동 전달)

const ChildComponent = ({ history }) => {}

Redirect

• <Redirect to="/login" /> 과 같이 작성
• history에 이동 전 경로가 남지 않음
• JSX 안에서 작성 가능
• history 객체를 사용하지 않으므로 상위 컴포넌트로부터 history객체를 받을 필요가 없음

Link

• <Link to="/login" /> 과 같이 작성
• a 태그와 비슷한 역할을 하지만 새로고침되는 방식이 아닌 요청한 부분의 페이지만 리로드 된다
• 이동 전 경로가 history 객체에 남는다