<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" width="40px" /> react-router-dom 라이브러리를 공부하면서 기록합니다.
</aside>
목차
react-router-dom 설치하고 Route 컴포넌트 만들기
history props 이용해서 홈으로 가기 버튼 구현하기
Switch 컴포넌트로 조건에 맞는 라우트 컴포넌트 보여주기
React-Router를 굳이 설치해서 사용하는 이유는?
리액트 라우터를 본격적으로 사용하기에 앞서서 라우팅은 무엇이고, 리액트로 웹 페이지를 개발할 때, 리액트 라우터를 설치해서 사용하는 이유가 무엇인지 알아보자.
라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 것, 그리고 그런 작업
리액트 라우터를 사용하는 이유
리액트 자체적으로 라우팅을 지원하는 기능이 없기 때문이다. 따라서 리액트로 라우팅을 구현하기 위해서는 우리가 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주도록 설정해야 한다. → 귀찮다!
그러면, React-Router는 무엇인가?
리액트 라우터는 리액트에서 라우팅을 지원하는 비공식적인 써드파티 라이브러리로 많은 개발자가 정말 많이 사용하고 있다. 클라이언트 단에서 이뤄지는 라우팅을 간편하게 처리할 수 있게 도와준다. 더불어서 서버 단의 랜더링을 돕는 도구들이 함께 받아진다.
01. 설치와 기본적인 설정으로 리액트 라우터 시작하기