[React] URL 파라미터와 쿼리

페이지 주소 정의 시, 가끔 유동적인 값을 전달해야할 수 있는데 이는 파라미터와 쿼리로 나눌 수 있다.

• 파라미터 예시 : /profiles/velopert
• 쿼리 예시 : /about?details=true

유동적인 값 사용해야 하는 상황에서 둘 중 뭘 써야할지 정할 때, 무조건 따라야 하는 규칙은 없다.

다만, 일반적으로 파라미터는 특정 아이디, 이름을 사용해 조회할 때 주로 사용한다.

쿼리는 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 주로 사용한다.

---

1. URL 파라미터

1. Profile 페이지에서 파라미터 사용해보기

• 1-1) Profile 컴포넌트 만들기

  • /profile/developer와 같은 형식으로 뒷부분에 유동적인 username 값을 넣어 줄 때 해당 값을 props로 받아 와서 조회하는 방법 알아보자!

    // Profile.jsx
    import React from "react";
    import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
    import { useParams } from "react-router-dom"; // useParams 임포트
    
    const data = {
    developer: {
      name: "겨레",
      description: "리액트를 공부 중인 개발자",
    },
    baseballTeam: {
      name: "기아 타이거즈",
      description: "2024 한국시리즈 우승의 주인공",
    },
    };
    
    // 이제 match 객체 대신 useParams 훅을 사용해 URL 파라미터를 가져와야함!!!!
    const Profile = () => {
    const { username } = useParams(); // URL에서 username 가져오기
    const profile = data[username]; // username에 해당하는 프로필 찾기
    
    if (!profile) {
      return <div>존재하지 않는 사용자입니다.</div>;
    }
    return (
      <div>
        <h3>
          {username}({profile.name})
        </h3>
        <p>{profile.description}</p>
      </div>
    );
    };
    
    export default Profile;
    

✅ URL 파라미터를 사용할 때!
👉 이제 match 객체 대신 useParams 훅을 사용해 URL 파라미터를 가져와야함!!!!

// 상단에 임포트 필수!
import { useParams } from "react-router-dom"; // useParams 

• 1-2) App 컴포넌트에서 Profile 컴포넌트를 위한 라우트를 정의하기

  • 사용할 path 규칙에는 /profiles/:username이라고 넣어 주면 된다. 이렇게 useParams 훅을 호출하여 params 값을 직접 가져올 수 있다.

  • 라우트 정의 후, 상단에 각 프로필 페이지로 이동하는 링크도 추가한다.

    // App.jsx
    import React from "react";
    import { Routes, Route, Link } from "react-router-dom"; // Link 사용 임포트
    import "./App.css";
    import About from "./About";
    import Info from "./Info";
    import Home from "./Home";
    import Profile from "./Profile";
    
    const App = () => {
    return (
      <div>
        <ul>
          <li>
            <Link to="/">홈</Link>
          </li>
          <li>
            <Link to="/about">소개</Link>
          </li>
          <li>
            <Link to="/profile/developer">developer 프로필</Link>
          </li>
          <li>
            <Link to="/profile/baseballTeam">baseballTeam 프로필</Link>
          </li>
        </ul>
        <hr />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/info" element={<Info />} />
          {/* <Route path={["/about", "/info"]} element={<About />} /> */}
          {/* 이제는 또 배열 안된다네... */}
          <Route path="/profile/:username" element={<Profile />} />
        </Routes>
      </div>
    );
    };
    
    export default App;
    

---

2. URL 쿼리

• 쿼리는 location 객체에 들어 있는 search 값에서 조회할 수 있다.
  • location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 애플리케이션의 현재 주소에 대한 정보를 지니고 있다.

• location의 형태

{
"pathname": "/about",
"search": "?detail=true",
"hash": ""
}

• 위 location 객체는 http://localhost:3000/about?detail=true 주소로 들어갔을 때의 값이다.

• URL 쿼리를 읽을 때
  👉 위 객체가 지닌 값 중에서 search 값을 확인해야 한다. 이 값은 문자열 형태로 되어 있다.

  • URL 쿼리는 ?detail=true&another=1과 같이 문자열에 여러 가지 값을 설정해 줄 수 있다.

• search 값에서 특정 값을 읽어 오기 위해서는 이 문자열을 객체 형태로 변환해줘야 한다.

  • 이를 위해서는 qs 라이브러리를 설치해야 함.

  npm install qs

2. About 페이지에서 쿼리를 받아오는 예제를 만들어보자!

• 2-1) About 컴포넌트 수정하기

  • About 컴포넌트에서 location.search 값에 있는 detail이 true인지 아닌지에 따라 추가 정보를 보여주도록 만든다.

    // About.jsx
    import React from "react";
    import qs from "qs"; // qs 임포트
    import { useLocation } from "react-router-dom"; // useLocation 임포트
    
    const About = () => {
    const location = useLocation(); // useLocation 훅을 사용해 location 객체 가져오기
    const query = qs.parse(location.search, {
      ignoreQueryPrefix: true, // 문자열 맨 앞의 ?를 생략
    });
    const showDetail = query.detail === "true"; // 쿼리의 파싱 결과 값은 문자열
     
    return (
      <div>
        <h1>소개</h1>
        <p>이 프로젝트는 리액트 라우터 기초를 실습해 보는 예제 프로젝트입니다.</p>
        {showDetail && <p>detail 값을 true로 설정하셨군요!</p>}
      </div>
    );
    };
    
    export default About;

  • const showDetail = query.detail === "true";
    query.detail이 문자열 "true"와 완전히 일치하는지 확인하는 코드
    그 결과는 true 또는 false로 평가되어 showDetail 변수에 할당됨. 즉, query.detail이 "true"이면 showDetail은 true로, 그렇지 않으면 false로 설정됨.

    
    

/about?detail=true 주소를 작성하고 접속해보면...

📍 쿼리 사용 시, 주의사항
쿼리 문자열을 객체로 파싱하는 과정에서 결과 값은 언제나 문자열!!!

• ?value=1 혹은 ?value=true와 같이 숫자나 논리 자료형(boolean)을 사용한다고 해서 해당 값이 우리가 원하는 형태로 변환되는 게 아니라 "1", "true"와 같이 문자열 형태로 받아진다.
  
  만약 숫자를 받아와야 한다면 parseInt 함수로 숫자로 변환해 주고, 논리자료형 값을 사용해야 할 경우 정확히 "true/false" 문자열이랑 일치하는지 비교한다.