TIL 23.01.25

오늘은 React Router에 대해서 배웠다.

 

React Router는 주소에 따라서 다른 뷰를 보여주기 위해 필요하고,

대표적으로 BrowserRouter, Routes, Route, Link 등의 컴포넌트를 사용한다.

 

BrowserRouter 컴포넌트는 HTML5의 History API를 사용해

페이지를 새로고침 없이 주소를 변경하게 도우며.

일반적으로 index.js에 <App/>을 감싼 형태로 사용한다.

 

Routes 컴포넌트는  Route들을 포함하는 컴포넌트이고,

Route는 path와 element 속성을 가지며,  각각 경로와 보여주고자 하는 컴포넌트를 나타낸다.

 

Link 컴포넌트는 경로를 연결해주는 역할을 하는 컴포넌트이며,

<a> 와는 다르게, 페이지를 새로 불러오지 않고 애플케이션을 유지시킨다.

 

 

배운 바탕으로 react-router-dom을 설치하여 과제 실습을 진행하였다.

과제를 진행하면서, 뒤로가기를 구현하는 기능도 구현을 해보았는데,

이 기능은 useNavigate를 사용하여 구현해 보았다.

 

react-router-dom에서 useNavigate를 import하여

navigate라는 변수에 할당해준 뒤, 이를 이용하여 페이지의 조작이 가능하다.

useNavigate는 react v6 에서 useHistory 가 변화한 것으로, window의 history기능을 사용할 수 있다.

 

따라서 navigate(-1)은 이전 페이지로 이동하는 것과 동일하다.

 

useNavigate 사용 예

 

 

구현 영상