리액트로 라우터 생성하기 (react-router-dom & qs 라이브러리)

📌 react-router-dom 라이브러리

React에서 라우팅(Routing) 기능을 제공하는 라이브러리로 웹 어플리케이션에서 페이지 전환을 관리하는 기능이다.

- 컴포넌트를 사용해 URL경로에 따라 페이지를 렌더링 할 수 있다.

- Link 컴포넌트를 이용해 경로를 지정하고 Route컴포넌트로 URL경로에 따라 렌더링 할 컴포넌트를 정의한다.

 

    설치 (VScode - 리액트프로젝트)

yarn add react-router-dom@5.3.0

- package.json에서 설치 확인, @는 버전이다.

- Link와 Route컴포넌트는 react-router-dom에서 import 해서 사용한다

 

예제코드

import { Link } from 'react-router-dom';

const App = () => (
<div>
    <div>
    	<Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>

	<Route path="/" component={Home} exact={true}/>
        <Route path="/about" component={About}/>
        <Route path="/contact" component={Contact}/>
    </div>
</div>
);

 Link 컴포넌트 

- 해당 컴포넌트로 감싼 요소는 클릭할 경우 to에 지정한 경로로 이동하여 페이지가 렌더링 된다

- html의 a태그같은 기능을 제공하며 css로 스타일을 줄 때는 a태그로 지정한다.

- 이동한 컴포넌트에서 props객체를 사용할 때는 match 또는 location 속성으로 받아올 수 있다.

- match: 현재 URL과 일치하는 라우트에 대한 정보를 가지며 URL 경로에서 정의된 파라미터 값을 포함한다.
- location: 현재 URL의 정보를 가지며 쿼리 스트링, 해시, 경로 등의 정보를 포함한다.

 

 Route 컴포넌트 

- path속성: URL경로 지정

- component속성: URL접근시 렌더링 할 컴포넌트 정의

- exact속성 : exact={true} 속성을 부여하면 URL경로가 정확히 일치할 때만 렌더링 할 컴포넌트를 지정

 

📌 react-router-dom 사용법

1. index.js파일

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <BrowserRouter>
 <App />
 </BrowserRouter>
  
);

- 리액트 프로젝트에서 라우팅 기능을 사용하려면 BrowserRouter 컴포넌트로 App을 감싸 렌더링 해야 한다.

 

2. 라우터관리 컴포넌트 생성 - RouterComponent.jsx

import React from 'react'
import { Link, Route } from 'react-router-dom'
import About from './About'
import Home from './Home'
import Profiles from './Profiles'

const RouterComponent = () => {
  return (
    <div>
        <div className='menu'>
            <Link to="/"><span>홈</span></Link> 
            <Link to="/about?name=홍길동&age=26&gender=남자"><span>소개</span></Link>
            <Link to="/profiles"><span>프로파일</span></Link>
        </div>
        <hr />
       <Route path="/" component={Home} exact={true}/>
       <Route path="/about" component={About}/>
       <Route path="/profiles" component={Profiles}/>
    </div>
  )
}

export default RouterComponent

 

- 라우팅을 지정하기 위해 Link와 Route컴포넌트를 import해온다.

- 출력할 menu를 만들고 Link컴포넌트로 요소를 감싸 경로를 지정해 준다.

- Route컴포넌트로 해당 경로에 대한 component를 바인딩한다.

- Route의 기본페이지(루트/)에 exact 속성을 true로 부여하여 해당 컴포넌트만 렌더링 되도록 해준다

** exact 속성 지정 안 할 경우 모든 경로에 /루트가 기본으로 붙어 페이지가 같이 렌더링 된다.

 

 

3. App.js -  라우터 컴포넌트 지정 

import './App.css';
import RouterComponent from './Components/RouterComponent';

function App() {
  return (
    <div className="App">
      <RouterComponent/>
    </div>
  );
}
export default App;

- 만들어둔 RouterComponent를 App안에 담아 지정해 주어야 페이지가 렌더링 된다.

 

📌 qs 라이브러리

JavaScript에서 query string을 생성하고 Parsing 하는 기능을 제공하는 라이브러리이다.

- JavaScript객체 <-> Query String으로 서로 변환할 수 있다.

 

 query string  : URL에서 데이터를 전달하는 방법으로?(물음표) 뒤에 위치한 문장을 의미한다.

 Parsing  : 데이터를 구조화된 형식으로 분석하고 원하는 정보를 추출하는 것

https://example.com/posts?page=2&sort=newest

 

    설치 (VScode - 리액트프로젝트)

yarn add qs

 

📌 qs 활용하기

위의 예제에서 react-route-dom 라이브러리를 사용해 만든 RouterComponent

import React from 'react'
import { Link } from 'react-router-dom'
import { Route } from 'react-router-dom/cjs/react-router-dom.min'
import About from './About'
import Home from './Home'
import Profiles from './Profiles'

const RouterComponent = () => {
  return (
    <div>
        <div className='menu'>
            <Link to="/"><span>🏠홈</span></Link> 
            <Link to="/about?name=홍길동&age=26&gender=남자"><span>소개</span></Link>
            <Link to="/profiles"><span>프로파일</span></Link>
        </div>
        <hr />
       <Route path="/" component={Home} exact={true}/>
       <Route path="/about" component={About}/>
       <Route path="/profiles" component={Profiles}/>
    </div>
  )
}

export default RouterComponent

 

- Link와 Route컴포넌트를 사용해 각 메뉴에 경로를 지정하고 렌더링 할 컴포넌트 바인딩

- /about의 url에 쿼리스트링으로 넘겨준 값은 location 속성으로 받는다.

 

구분	형태	props 값
파라미터	/posts/1/comments	{match}
쿼리스트링	/comments?postId=1	{location}

 

   About컴포넌트 (/about 경로) 

- 쿼리스트링 예제

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

const About = ({location}) => {
  const search = qs.parse(location.search,{ignoreQueryPrefix:true});
  console.log(search);
  const{name,gender,age} = search;

  return (
    <div>
        <h1>소개</h1>
        <p>이 프로젝트는 라우터 예제 입니다.</p>
        <h3>이름:{name}</h3>
        <h3>나이:{age}</h3>
        <h3>성별:{gender}</h3>
    </div>
  )
}

export default About

 

- {location} 속성으로 받아온 쿼리스트링은 텍스트이기 때문에 qs.parse함수를 이용해 객체로 변환해야 한다.

 

qs.parse	query string 모듈의 parse함수로 쿼리스트링을 파싱하여 객체로 변환시킨다.
location.search	현재 URL의 쿼리스트링
{ignoreQueryPrefix:true}	이 옵션은 파싱된 결과에서 ?(물음표) 접두사를 제거하도록 지정한다.

- 결과값을 search에 담고 데이터 안의 키들을 비구조화 할당한다.

 

   Profiles컴포넌트 (/profiles 경로)

- 파라미터 예제

import React from 'react'
import { Link, Route } from 'react-router-dom'
import Profile from './Profile'

const Profiles = () => {
  return (
    <div>
        <ul>
           <Link to="/profiles/lee"><li>이순신</li></Link>
           <Link to="/profiles/hong"><li>홍길동</li></Link>
           <Link to="/profiles/shim"><li>심청이</li></Link>
        </ul>
        <hr />
        <Route path="/profiles" exact={true} render={()=><div>사용자를 선택해주세요!</div>}/>
        <Route path="/profiles/:username" component={Profile}/>
    </div>
  )
}

export default Profiles

 

- 프로필 페이지를 렌더링 하는 컴포넌트로 목록에 Link컴포넌트를 사용해 경로를 지정한다. (파라미터 값 각각 부여)

- 아래에 Route컴포넌트로 경로를 지정하고 목록을 선택하지 않았을 경우 문구를 <div> 태그로 렌더링

- 유저를 선택했을 경우 :username 파라미터를 받아 profile컴포넌트(유저정보 페이지)를 렌더링 한다.

 

   profile컴포넌트 (profiles의 유저 정보)

- 파라미터 예제

import React from 'react'

const Profile = ({match}) => {
    console.log(match)
    const{username} = match.params;
    const data = {
        hong:{
            name:'홍길동',description:'고전 소설 홍길동전의 주인공'
        },
        shim:{
            name:'심청이',description:'리액트 개발자'
        },
        lee:{
            name:'이순신',description:'조선시대 장군'
        }
    }
    const profile = data[username];

  return (
    <div>
        <h3>이름:{profile.name}</h3>
        <h3>소개:{profile.description}</h3>
    </div>
  )
}

export default Profile

 

- profiles 컴포넌트에서 파라미터로 보낸 값은{match} 속성을 이용해 가져온다.

- match를 콘솔창에 찍어보면 데이터가 params에 담겨있는 것을 확인할 수 있다. 이 결과는 username변수에 할당.

 

- 각 유저에 대한 정보를 작성하고 data변수에 데이터 정의

- data객체에서 usename키 값에 해당하는 프로필 정보를 담아 profile변수에 할당한다.

- profile객체에 정의되어 있는 name과 description 프로퍼티 값을 화면에 출력한다.

 

profiles페이지 - 아래 profile 정보