개발야옹

이전 글

1. 2022.02.09 - [React] - [ React ] React Router #1

2. 2022.02.10 - [React] - [ React ] React Router #2

URL Parameter

예시 : /profile/kitez

Query

예시 : /profile?isMobile=true

페이지주소를 정의할 때 유동적인 값을 전달해야 할 경우도 있다. 이때 유동적인 값을 URL parameter나 Query를 통해서 전달을 하는데 일반적으로 특정 아이디 혹은 이름 등을 조회하는 경우에는 URL parameter를 사용하며, 우리가 어떤 키워드를 검색하거나, 페이지에 대한 옵션을 전달하는 경우에는 Query를 사용한다. 

URL parameter

// src/Profile.js

import {useParams} from "react-router-dom";

const data = {
    kitez : {
        name : "장연지",
        description : "애기 개발자"
    },
    arin : {
        name : "오아린",
        description : "얼굴 천재"
    }
};

const Profile = () => {

    const { username }  = useParams();
    const profile = data[username];

    if(!profile){
        return <div><h1>존재하지 않는 사용자입니다.</h1></div>;
    }
    return(
        <div>
            <h1>{username}({profile.name})</h1>
            <h4>description : {profile.description}</h4>
        </div>
    );
};

export default Profile;

// src/App.js

import './App.css';
import {Link, Route, Routes, useRoutes} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Profile from "./Profile";


function App() {
    let element = useRoutes([
        { path : "/", element : <Home /> },
        { path : "/home", element : <Home /> },
        { path : "/about", element : <About /> }
    ]);

  return (
      //element
    <div className="App">
        <h1> 라우팅 프로젝트 </h1>

        <ul>
            <li>
                <h2><Link to="/">Home</Link></h2>
            </li>

            <li>
                <h2><Link to="/about">About</Link></h2>
            </li>

            <li>
                <h2><Link to="/profile/kitez">Profile : kitez</Link></h2>
            </li>

            <li>
                <h2><Link to="/profile/arin">Profile : arin</Link></h2>
            </li>
        </ul>
        <Routes>
            <Route path='/' element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/profile/:username" element={<Profile />} />
        </Routes>
    </div>
  );
}

export default App;

실행결과

→ react-router-dom library의 useParams 라는 Hook을 사용하여 /profile/:username 의 파라미터 값을 읽어와 해당 parameter값에 해당하는 유저의 정보를 보여준다. 

URL Query

// src/About.js

import {useSearchParams} from "react-router-dom";

const About = () => {

    const [ searchParams ] = useSearchParams();
    const query = searchParams.get('detail');

    return(
        <div>
            <h1>I'm About!</h1>
            <h3>소개</h3>
            { query !== null ? <p>query is {query}</p> : <p>query is null</p>}
        </div>
    );
};

export default About;

실행결과

useSearchParams

useSearchParams는 Array()를 반환한다.  

useSearchParams()의 반환값을 아래 코드를 통해 콘솔에서 Array()인 것을 확인할 수 있다. 

우리가 사용할 것은 0 번째 index에 위치하는 URLSearchParams이기 때문에 대괄호 안에 객체를 받아올 변수 이름을 적어주어야 한다. 

 ex) const [ searchParams ] = useSearchParams();

    const q = useSearchParams();
    console.log(q);

parameter값이 여러개인 경우 parameter의 value와 done을 forEach method를 통해서 확인할 수 있다. 

    const [ searchParams ] = useSearchParams();
    // useSearchParams() 반환값이 Array
    // 0 : URLSearchParams
    // 1 : function
    

    searchParams.forEach( (done, value) => {
        console.log( value + " : "+ done);
    })

localhost:3000/about?detail=true&isMobile=false 인 경우 console 결과

React Router 사용법

1.  프로젝트 생성 및 라이브러리 설치

npx create-react-app react-rotuer-tutorial // cra react project 생성
cd react-router-tutorial // 생성한 project dir로 이동
npm install react-router-dom // react-router-dom 라이브러리 설치

2.  프로젝트에 라우터 적용

// src/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(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
  document.getElementById('root')
);

reportWebVitals();

3.  라우팅할 페이지 만들기

// src/Home.js

const Home = () => {
    return(
        <div>
            <h1>I'm home!</h1>
        </div>
    )
}

export default Home;

// src/About.js

const About = () => {
    return(
        <div>
            <h1>I'm About!</h1>
        </div>
    )
}

export default About;

4.  Routes, Rotue 컴포넌트로 특정 주소에 컴포넌트 연결

// src/App.js

import logo from './logo.svg';
import './App.css';
import {Route, Routes} from "react-router-dom";
import Home from "./Home";
import About from "./About";


function App() {
  return (
    <div className="App">
        <h1> 라우팅 프로젝트 </h1>

        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/about" element={<About />}>About</Route>
        </Routes>
    </div>
  );
}

export default App;

5.  라우팅 잘 되는지 확인하기

npm start

localhost:3000

localhost:3000/about

react-router-dom v6 부터 문법이 조금 바뀌었다. 위에서 설명한 문법은 v6 문법이다.