[React] react-router-dom 설치 및 맛보기

우리가 웹사이트에서 페이지 이동을 할 때 react-router-dom을 이용하면 편하다.

예를 들어 도메인주소/register를 입력하여 이 웹사이트로 이동했다가, 도메인주소/list 를 입력하면 회원명단이 보이게 사이트를 이동해주게 하는 기능이다.

 

create-react-app을 이용해 진행하였다.

---

react-router-dom 이용하기

이용하기 위해 https://reactrouter.com/web/example/basic 사이트에서 코드를 가져오자.

이후 app.js에 위 코드를 가져와주자.

귀찮다면 아래 코드를 그냥 ctrl-c, ctrl-v를 하자.

어떻게 가져오는지 아래 코드를 보고 참고하자.

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

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

export default App;

App() 함수를 잘 보자.

• <Router>의 밑부분부터 html코드는 우리한테 보여주는 view를 렌더링한 부분이다.
• <Switch> 문이 보이는가? 여기 아래의 코드는 라우터를 설정해주는 부분인데, 도메인주소/home, 도메인주소/about 등으로 들어가면 위쪽의 html 코드의 Link to에 해당하는 내용을 보여주는 것이다. Switch문은 c++, java와 같은 switch문과 기능이 비슷한데, 이 switch문이 없다면 모든 라우트들이 렌더링되게 된다.

---

라우트 변경

근데 난 클라이언트에 보여줄 페이지를 따로 꾸미고 싶을 수 있다.

components/views 폴더에 각 라우트에 따른 view 컴포넌트들을 지정한 모습이다.

위 js 코드들을 렌더링하여 보여주게 하고 싶으므로 코드를 아래와 같이 수정한다.

주석을 잘 보자.

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

// 컴포넌트를 사용하기 위한 import
import LandingPage from './_components/views/LandingPage/LandingPage'
import LoginPage from './_components/views/LoginPage/LoginPage'
import RegisterPage from './_components/views/RegisterPage/RegisterPage'

function App() {
  return (
    <Router>
      <div>
        <Switch>
        	// 라우트 설정, 컴포넌트 설정을 바로 할 수 있다.
          <Route exact path="/" component={LandingPage} />
          	// 컴포넌트 설정을 아래와 같이 할 수도 있다.
          <Route path="/login">
            <LoginPage />
          </Route>
          <Route path="/register">
            <RegisterPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
export default App;

참고로 난 LandingPage.js, LoginPage.js, RegisterPage.js 코드에 각 js파일명만 출력하게 해두었다.

한번 결과로 파일명이 잘 출력되는지 확인해보자.

셋 다 라우트 path에 따른 컴포넌트를 잘 렌더링했음을 확인할 수 있다.

참고로 react-router-dom은 코드를 수정하고 저장하면

바로 수정된 내용이 반영돼 자동으로 컴파일하여 렌더링한다.

Warning 이유는 react-router-dom에서 Link를 import 했으나, html 코드를 지워 Link to 기능을 사용하고 있지 않기 때문이다. 크게 상관 없을듯하다.

---

간단하게 리액트를 맛보았다.

어서 리액트에 좀 익숙해져서 node.js나 java로 백엔드를 간단하게 만들고 프론트쪽으로 react도 다뤄볼 수 있었음 좋겠다.

 

도움된 블로그 출처

https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React] react-router-dom 시작하기