라벨이 수정인 게시물 표시

[React] React Router 사용해보기 (BrowserRouter, HashRouter, withRouter, exact path, Switch, history, location, match, Link)

이미지
리액트에서 페이지 이동 즉, 라우터를 사용하기 위해서는 react-router-dom 모듈 패키지를 설치를 해야한다. 리액트 라우터 설치 $ npm install react-router-dom react-router 도 설치해야 하지만, react-router-dom 패키지 내부에 react-router가 함께 설치되기 때문에  react-router-dom만 설치하면 된다. 여기서 한가지 알아야 할 점은 리액트에서 라우터는 실제로 페이지가 바뀌는것이 아닌 가상으로 바뀌는것으로 웹브라우저가 해당 페이지가 변경되었는지 인식하지 못 할 수 있다. 페이지 이동을 위해서 사용되는 라우팅 방법에는 몇가지가 있다.  그 중에서 많이 사용되는  BrowserRouter, HashRouter, Route, Link 에 대해서 공부해 봤다. 라우팅을 사용하기 위해서는  import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; 해당 코드를 import 해야한다. import 한것들에 대해서 간단히 말하면 BrowserRouter와 HashRouter는 라우터 기능을 사용하게 해주는 큰 틀과 같은 역할을 하며 Route는 경로를 지정하고 해당 경로에 대한 출력 화면 즉, 컴포넌트를 설정할 수 있다. 마지막으로 Link는 a 태그와 같이 설정한 경로에대한 컴포넌트를 불러오도록 도와준다. import React from 'react' import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; import LoginPage from './components/LoginPage' ; import MainPage from './components/MainPage' ; import RegisterPage from './