React | Link태그와 a태그

1) a태그를 클릭하면

=> 페이지를 이동시키면서, 페이지를 아예 새로 불러온다.

=> 리액트 앱의 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게 된다.

 

 

2) Link 태그를 클릭하면

=> Link태그는 HTML5 History API를 사용해서 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다.

 

 

예제)

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

<Link to="/about">About</Link>

 

 

 

참고 사이트

velog.io/@bigbrothershin/React-Router