React-Router-Dom

React는 SPA(Single Page Application)이다.
리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router 를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다.

즉, React-Router는 새로운 페이지를 불러오지 않는 상황에서, 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.

Link vs a 태그

react-router에서는 화면을 이동할 때 Link 를 이용하여 to 속성에 이동할 주소 정보를 입력하여 사용한다. 하지만 기존에 a태그라는 페이지 이동을 위해 사용할 수 있는 html 태그가 있다. 이 둘의 차이점은 바로 새로고침 여부이다.
Link 태그는 브라우저의 주소만 바꿀 뿐 새로고침을 발생시키지 않고 이동한다.
하지만 a태그는 브라우저의 주소를 바꾸고 새로고침을 발생시키면서 이동한다.
페이지 새로고침 여부는 웹 페이지에서 중요하다. 페이지가 새로고침될 경우 현재 렌더링되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링되게 된다. 이렇게 되면 컴포넌트에 설정되어 있는 state 등이 날아갈 수 있기 때문이다.
Link 태그를 이용해서 넘어가면 렌더링된 컴포넌트의 state가 유지되면서 넘어갈 수 있지만, a태그를 사용한 경우에는 컴포넌트가 삭제되고 다시 렌더링되기 때문에 갖고있는 state도 전부 초기화 될 수 있다.