[웹] React 페이지 이동

📝 페이지 구성을 위한 리액트의 페이지 이동방법을 알아보고 익히는 것을 목표로 한다.

📌 react-router-dom

• 라우팅 : url 요청에 대해 어떤 페이지를 보여줄지 결정하는 과정.

• react-router-dom 내장 컴포넌트

  • BrowserRouter
  • Route
  • Switch
  • Link

BrowserRouter: html5의 history API를 이용해 UI 업데이트를 한다.

Switch: Route로 생성된 자식컴포넌트 중에 매칭되는 첫번째 Route를 렌더링 해준다. 이것을 이용해 특정 컴포넌트만 렌더링 해 화면에 띄울 수 있다.

Route: 컴포넌트 별로 원하는 url을 지정한다.

Link: 지정한 URL로 이동되게 해준다. 아예 새로운 페이지를 불러오므로 기존 컴포넌트의 상태값은 소멸된다.

** 라우팅에 대한 이해는 추후에 더 자세히 하겠다.. 제대로 처음부터 하는 게 아니라 이해도가 많이 떨어지는 것같다.

참고
리액트 페이지 이동 실습 참고 영상
react-router-dom 참고 사이트