[React] 리액트에서 새로고침(Loading) 없이 다른 페이지로 이동하기 : Link

새로고침을 하고싶지 않다면,

절대, <a> 링크를 써서는 안 된다.

<a>링크를 써서 태그된 부분을 클릭하게 되면,

이동할때 페이지를 새로고침하면서 로딩하게 된다.

새로고침할떄, 깜빡거리는 현상(Blink)이 보기 싫다면,

리액트 라우터에 존재하는 Link 컴포넌트를 써야한다.

Link를 사용하면 페이지를 새로고침해서 불러오지 않고,

주소창을 변경하며 원하는 라우트로 화면을 전환하게 된다.

Link와 유사한 비슷하지만 추가적인 기능을 갖은 컴포넌트도 존재한다.

이름은 NavLink

이 컴포넌트는 현재 주소와 해당 컴포넌트의 목적지 주소가 일치한다면,

특정 스타일을 지정할 수 있다.

CSS 스타일 지정 : activeStyle으로 지정.

CSS 클래스 지정 : activeClassName으로 지정.

하지만, Link나 NavLink의 경우 링크를 걸고 단순히 클릭했을 때, 

이동시키는 기능이라 자바스크립트에서 페이지를 이동하기에는 한계가 있다.

이 경우에는 라우트로 사용되는 컴포넌트가 받는 props 중 history 객체를,

그 history 객체 중 push 함수를 활용하면 된다.

history.push('/about/intro');