[Node] React 정리(24) - 리액트 라우터

Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했죠.

 

요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문이지요.

그래서 우리는 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주지요.

 

싱글페이지라고 해서, 한 종류의 화면만 있냐구요? 그건 아닙니다. 예를들어 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있겠지요. 또한 이 화면에 따라 주소도 만들어줘야 합니다. 주소가 있어야, 유저들이 북마크도 할 수 있고 서비스에 구글을 통해 유입될 수 있기 때문이죠. 다른 주소에 따라 다른 뷰를 보여주는것을 라우팅 이라고 하는데요, 리액트 자체에는 이 기능이 내장되어있지 않습니다. 따라서 우리가 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 합니다.

 

이번에 배우게 될 react-router 는, 써드파티 라이브러리로서, 비록 공식은 아니지만 (페이스북 공식 라우팅 라이브러리는 존재하지 않습니다) 가장 많이 사용되고 있는 라이브러리인데요. 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줍니다. 게다가 서버 사이드 렌더링도 도와주는 도구들이 함께 딸려옵니다. 추가적으로 이 라우터는 react-native 에서도 사용 될 수 있습니다.

 

기본 프로젝트는 아래 프로젝트를 참고해주시기 바랍니다.

https://github.com/libtv/React_Note/tree/master/24.%20react-redux

GitHub - libtv/React_Note: This is a notebook organized by React.

 

# Contents

---

• 라우터 적용

 

 

# 라우터 적용

---

라우터를 사용하게 되면 여러 페이지를 다룰 수 있습니다. 간단하게 사용방법을 통해 라우터를 적용해보도록 하겠습니다.

 

라이브러리를 아래 명령어를 통해 설치합니다.

npm install --save react-router-dom

 

그 다음엔, index.js 에서 BrowserRouter 컴포넌트를 App 컴포넌트에 감싸야 합니다.

 

아래 코드는 index.js 의 내용입니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

이제는 각각의 페이지를 만들어보겠습니다. Home 페이지와 Abouts 페이지를 만들고, 각각의 페이지를 렌더하면서 링크 버튼을 클릭 했을 때 이동하는 방식으로 처리하도록 하였습니다. routes 디렉토리를 생성해주시고, Home.js 와 Abouts.js 를 만들어주세요

 

아래 코드는 routes/Home.js 의 내용입니다.

import React from 'react'

export default function Home() {
    return (
        <div className='home'>
            <>
                <h2>여기는 Home 입니다.</h2>
            </>
        </div>
    )
}

 

아래 코드는 routes/Abouts.js 의 내용입니다.

import React from "react";

export default function Abouts() {
    return (
        <div className="abouts">
            <>
                <h2>여기는 Abouts 입니다.</h2>
            </>
        </div>
    );
}

 

마지막으로 App.js에서 라우트를 설정해주면 됩니다. Link 컴포넌트를 통해 해당 라우트로 접속 하는 것을 허용하는 것이고, 정의한 Route 컴포넌트 를 통해 유효한 페이지를 정의해주고 그 해당 페이지의 컴포넌트를 정의해주고 있습니다.

 

아래 코드는 App.js 의 내용입니다.

import logo from "./logo.svg";
import "./App.css";
import { Route, Link } from "react-router-dom";
import Home from "./routes/Home";
import Abouts from "./routes/Abouts";

function App() {
    return (
        <div className="App">
            <ul>
                <li>
                    <Link to={"/"}>홈</Link>
                </li>
                <li>
                    <Link to={"/abouts"}>어바웃</Link>
                </li>
            </ul>
            <Route path={"/"} exact={true} component={Home}></Route>
            <Route path={"/abouts"} component={Abouts}></Route>
        </div>
    );
}

export default App;

 

1. 파라미터

파라미터의 값을 호출하기 위해 profile.js 를 넣어 코드를 작성해보도록 하겠습니다. 먼저 routes 디렉토리 안에 Profile.js 를 생성하여 코드를 작성합니다.

 

아래 코드는 Profile.js 의 내용입니다.

import React from "react";

const profileData = {
    admin: {
        name: "admin",
        description: "페이지 관리자",
    },
    user: {
        name: "user",
        description: "페이지 이용자",
    },
};

export default function Profile({ match }) {
    const { username } = match.params;
    const profile = profileData[username];

    return (
        <div className="profile">
            <>
                <h2>{profile.name}</h2>
                <h3>{profile.description}</h3>
            </>
        </div>
    );
}

 

match object 객체 안에 params 변수로 파라미터를 가져오게 됩니다. App.js 라우터 설정은 아래와 같이 간단하게 설정되어져 있습니다. :username 처럼 파라미터를 보내고 싶으시다면 : 를 넣어주시면 되겠습니다.

 

아래 코드는 App.js 의 일부 내용입니다.

<Route path="/profile/:username" component={Profile} />

 

 

2. 쿼리

이번엔 About 페이지에서 쿼리를 받아오겠습니다. 쿼리는 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값에서 읽어올 수 있습니다. location 객체는 현재 앱이 갖고있는 주소에 대한 정보를 지니고있습니다.

 

아래 코드는 Abouts.js 의 내용입니다.

import React from 'react';
import qs from 'querystring';

const About = ({ location }) => {
  const query = qs.parse(location.search);
  const detail = query.detail === 'true'; // 쿼리의 파싱결과값은 문자열입니다.

  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트랍니다.</p>
      {detail && <p>추가적인 정보가 어쩌고 저쩌고..</p>}
    </div>
  );
};

export default About;