[React] withRouter vs useHistory,useParams,useLocation

앞서 하위 컴포넌트에서 history를 사용하려면 withRouter를 사용해서 그 기능에 접근해야 한다고 포스팅한적이 있다.

 

그런데, useHistory로 history에 접근하여 사용하는 코드를 보고 급하게 이 글을 쓰게 되었다.

 

사실은 이렇다.

 

원래 <Route>를 사용하지 않은 컴포넌트에서는 widthRouter HoC로 감싸주어야 match, location, history를 사용할 수 있었는데,

 

React-router v5.1 이상이 되면서 

 

match는 useParams로,

history는 useHistory로,

location은 useLocation 이라는 hooks를 통해 접근할 수 있게 되었습니다.

 

그리고 react-router v5는 v4와 호환되게 개발되어서 이전버젼을 걱정하지 않고 개발할 수 있다고 합니다.