[React][환경세팅] react-router-dom 사용하기

React 개발 시 귀찮은 환경 세팅을 기억이 나지 않을 때 일일이 찾아 사용하기 번거롭기 때문에 미리 정리해 놓기로 했습니다. 

 

참조 1: https://reactrouter.com/web/guides/quick-start

참조 2: 리액트를 다루는 기술 서적 - 벨로 퍼트 

개요

SPA의 단점중 하나는 너무 많은 자바스크립트를 한 번에 불러온다는 것인데,

이 문제는 코드스플릿을 통해 해소할 수 있는데 라우트 별로 파일들을 나누어 트래픽과 로딩 속도를 개선할 수 있다고 합니다. 페이 지지가 여러 개인 사이트는 거의 필수로 적용된다고 보면 됩니다. 

 

설치

yarn add react-router-dom 

 

설명

• BrowserRouter: 주소에 대한 정보를 props에 담아 조회하거나 사용할 수 있다.
• : HTML5의 History API를 사용하여 페이지를 새로고침 하지 않고 주소를 변경한다.
• Link: history API를 사용하여 애플리케이션은 그대로 두고 경로만 변경한다.
• : a 태그는 페이지는 전환하는 과정에서 새로운 페이지를 불러옴으로 Link를 사용한다.
• URL Paramter || Query Parameter
  • URL Parameter
  • : /user/info
  • Query Paramter
  • : /user?detail=info

 

빠르게 세팅하기

1. 라우터가 필요한 영역 전체를 BrowserRouter로 감싸주기

: 꼭 index.js 안에 감싸줄 필요는 없지만 대부분의 사이트는 전역을 상대로 화면 전환을 하므로 index.js나 App.js, 혹은 메인이 되는 페이지에서 감싸도록 합니다. 그래야 전달되는 props값을 받을 수 있어 제대로 작동이 됩니다. 

// index.js
import { BrowserRouter } from 'react-router-dom';

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

 

2. 링크 만들어주기 (내비게이션)

리액트는 페이지 이동을 위해 a 태그 대신 Link라는 컴포넌트를 사용합니다. 

a 태그를 사용하게 되면 페이지 새로고침이 일어나기 때문에 SPA 개발 특성상 전체 새로고침이 아닌 부분 렌더를 해야하기 때문에 a 태그 대신 Link 태그를 사용합니다. 

렌더 이후에 개발자 모드에서는 a 태그로 확인이 가능하면 css 또한 a 태그로 생각하고 스타일을 입히면 됩니다. 

// Nav.js
import React from 'react'
import { Link } from 'react-router-dom'

function Nav() {
    return (
        <ul className="navList">
            <li className="navItem"><Link to="/">Home</Link></li>
            <li className="navItem"><Link to="/info">Info</Link></li>
            <li className="navItem"><Link to="/user">User</Link></li>
        </ul>
    )
}

export default Nav

 

3. 링크 별 페이지 만들기

특정 url 이외에 다른 경로로 접속했을 경우 무조건 404 페이지를 띄우고 싶다면 

마지막에 NotFound 페이지를 Route에 걸어주면 됩니다. 

// App.js
import {
  Switch,
  Route
} from 'react-router-dom'

//components
import Nav from './components/Nav'
import { 
  Home,
  Info,
  User,
  NotFound
} from './pages'

function App() {
  return (
    <div className="App">
      <Nav/>
      <hr/>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/user" component={User}/>
        <Route exact path="/info" component={Info}/>
        <Route component={NotFound} />  // url이 /, /user, /info아 아닌 모든 경우 NotFound가 렌더됩니다
      </Switch> 
    </div>
  );
}
export default App;

 

4-1. URL Paramter 사용하기

user라는 페이지에 userid라는 이름으로 값을 전달합니다. 

만약 url에 '/user/hong'이라고 접속을 하면, 컴포넌트 페이지에서는 userid='hong'으로 담겨옵니다.

 

// - App.js
- App.js
<Switch>
	{...}
	<Route exact path={["/user/:userid", "/user"]} component={User}/>
</Switch>

저 값(넘어오는 userid의 value값)에 접근을 하기 위해서

match.params. 키값  (여기서 키값은 userid가 됩니다.)으로 접근하여 값을 받아볼 수 있습니다.  

- User.js

// 목업데이터
const data = {
    user1: {
        name: '홍길동',
        userId: 'hong'
    },
    user2: {
        name: '김둘리',
        userId: 'kim'
    }
}
const User = ({ match }) => {
    const userid = match.params.userid; // match.params로 파라미터값을 받을 수 있음
    const userId2 = data[userid];  // 위 data목업데이터 에서 키값을 찾아 존재여부 확인    
    return (
        <div>
            This is User Page! <br/>
            {
                userId2 ?
                <p>User id is {userid}</p> : 
                <p>No User</p>
            }
        </div>
    )
}
export default User

 

 

4-2. Query Paramter 사용하기

url parameter에서는 url/:key 이렇게 값을 전달했다면,

query parameter에서는 /url? key=value 이렇게 기존 get 방식을 사용합니다. (저는 지금도 명칭이 너무 했갈립니다 ^^;;)

- App.js

<Route exact path={["/info?userid='user1'", "/info"]} component={Info}/>

대신 값을 받아보기 위해 url뒤에 붙은? 값을 제거하기 위해 한 번 더 작업을 해주면 깔끔하게 값을 받아볼 수 있습니다. 

저는 '리액트를 다루는 기술'이라는 책을 보고 학습을 하였기 때문에 해당 서적에서 제시해주는 방법에 따라 qs를 사용하였습니다. 

 

* qs 설치 

: qs는 querystring 타입의 데이터를 이리저리(?) 다룰 수 있게 해주는 라이브러리입니다. 

yarn add qs

query parameter의 값은 location에서 받아볼 수 있습니다. 

- Info.js

import qs from 'qs'
// 목업데이터
const data = {
    user1: {
        name: '홍길동',
        detail: 'hong gill dong detail'
    },
    user2: {
        name: '김둘리',
        detail: 'kim dool li detail'
    }
}
const Info = ({ location }) => {
	// location 에서 받음
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true // url 상에 앞에 ? 를 ignore함 
    })
    const queryCheck = data[query.userid];
    return (
        <div>
            This is info Page! <br/>
            {
                queryCheck &&
                <p>{queryCheck.userid}</p>
            }
        </div>
    )
}
export default Info

 

이렇게 정리해 두니 괜히 뿌듯합니다. ✨