개발야옹

이전 글

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 결과