[React] 리액트로 페이지 이동 구현 (라우팅, react-router-dom)

[React] 리액트로 페이지 이동 구현 (react-router-dom)

 

 

리액트로 페이지를 이동하려면 라우팅을 이용해야 한다.

 

우선 콘솔에 npm install react-router-dom을 입력하여 리액트라우터돔을 설치한다.

 

 

리액트 라우터 돔의 BrowserRouter, Route, Switch를 우선 알아보자.

이를 사용하기 위해서는 상단에 import를 해야한다.

 

import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

 

1. BrowserRouter

URL과 UI를 동기화해주는 라우터이다.

웹 애플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고,

관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해준다.

 

 

2. Route

컴포넌트에 path 속성을 이용하여 원하는 url를 지정한다.

그 url에 접속하면 해당 컴포넌트만 렌더링 된다.

즉, 사용자의 경로에 따라 다른 컴포넌트를 보여줄 수 있게 된다.

 

Route에서는 path 경로를 입력해야 하는데, path를 "/"로 지정한 것은 첫 페이지를 의미한다.

 

 

3. Switch

Switch는 Route로 생성된 자식컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링해준다.

 

각 URL에 따라 변경하고 싶은 컴포넌트를 Switch 태그로 감싸주면 되고,

Switch의 외부는 모든 페이지에서 공통으로 보여지는 부분이다.

 

 

4. Link

html의 링크 태그인 'a' 태그와 같은 개념이다.

html에서는 <a href=""></a>라고 작성했다면, 리액트에서는 <Link to=""></Link>로 작성한다.

페이지를 새로 불러오기 때문에, 기존 컴포넌트에서 들고 있던 상태값들이 날아가게 된다.

 

 

 

 

 

import DayList from "./components/DayList";
import Header from "./components/Header";
import Day from "./components/Day";
import { BrowserRouter, Route, Switch } from "react-router-dom";
 
function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/">
            <DayList />
          </Route>
          <Route path="/day">
            <Day />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}
 
export default App;

 

위의 예시를 봐보자.

모든 페이지에서 공통으로 보여지는 부분인 Header는 Switch 바깥에 설정해두었다.

DayList와 Day 부분은 페이지를 변경할 때마다 변경되는 부분이므로 Switch 안쪽에 설정해두었다.

첫 페이지는 DayList로 설정해두었으므로 DayList의 Route path를 "/"로,

Day 페이지로 이동하면 path를 "/day"로 바뀌게끔 구현했다.

 

DayList의 path에는 exact를 적어두었는데,

이를 적지 않으면 "/day"에도 "/"가 포함되어있으므로 "/day" 페이지에서도 DayList의 화면이 보이게 된다.

exact를 설정하면 "/"를 포함하는 URL이 아닌, "/"과 정확히 일치하는 URL에서만 동작하게 된다.