[리액트]페이지 이동하기

html에서 페이지를 이동할 때에는 <a> 태그에 href를 통해서 이동이 가능하다. 

리액트는 JSX언어를 이용하기 때문에 html과 조금 다르다. 고로 href로 이동이 불가하다! 

* Link 컴포넌트

 - html의 <a>태그와 유사한 기능을 하는 컴포넌트이다.

 - <a> 태그는 href속성으로 이동 경로를 지정한다면 <Link>는 to속성으로 prop을 통해 이동할 경로를 지정한다.

<Link> 태그를 사용하기 위해 reack-router-dom에서 Link를 import 해준다. 이 과정 없으면 현 문서(.js)에서 Link 태그를 사용할 수 없음.
//import를 해줬다는 건 당연히 npm install 을 했다는 것이겠지요?!

import { Link } from 'react-router-dom' //****

<Link>태그를 이용한다. <Link>태그 안에 to 속성을 이용하여 이동할 .js를 지정한다. 

예를 들면, 다음과 같다.

<Link to="./이동할 페이지 경로/파일명"> 

  <Button> 이동하기 </Button>

</Link>

이렇게 해주면 이동이 가능하다. 
위 코드는 브라우저에서 클릭 가능한 '이동하기(버튼)'으로 랜더링이 되고, '이동하기'를 클릭하면 주소창의 경로가 '<도메인 네임>/이동할 페이지' 로 갱신된다. 

=> 일반적으로 화면 상단이나 좌측에 위치한 네비게이션 바를 구현할 때 주로 사용하는 컴포넌트

 

참고 : https://www.daleseo.com/react-router-basic/