Link vs Redirect vs history.push

리액트에서 페이지 이동하는 3가지 방법을 알아 보려고합니다.

 

1. Link 

 Link는 react-router-dom에서 임포트후 <Link to="/login" /> 와 같이 사용 할수 있습니다.

내부적으로 <a></a> 형식으로 작동하지만 전체적으로 리렌더링하지않고 필요한 부분만 리랜더링 합니다..

JSX에서 사용가능하며 이동전 경로가 history객체에 남습니다.

객체에 이동전 경로를 남기고 싶지 않다면 <Link to="/" replace={true} /> 

 

2. history.push 

 history.push("/login") 이렇게 사용합니다.

 history stack을 사용합니다.

 JSX에서 쓸 수 없다. 함수안에서 사용해야 합니다

 

3. Redirect

 react-router-dom의 Redirect를 import 해온 후 <Redirect to="/login"> 와 같이 쓸수 있습니다.

 histroy.replace처럼 작동합니다. (이동전 경로가 남지 않는다.)

 JSX안에서 쓸수 있습니다.