React URL 파라미터와 쿼리스트링

React URL 파라미터 쿼리스트링

페이지 주소를 정의할 때 유동적인 값을 사용해야 하는 경우의 로직입니다.

example.com/profile?page=121feqtr

막 이런 식으로 url 뒤에 ? 가 붙고 유동적인 값을 넣는 형태를 쿼리스트링 주소라고 합니다.

이걸 한 번 구현해보겠습니다.

URL 파라미터

우선 다음과 같은 예제 코드를 작성합니다.

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

const data = {
  keroro: {
    name: "케로로",
    description: "케로로 소대의 대장",
  },
  giroro: {
    name: "기로로",
    description: "케로로 소대의 사격수 하사",
  },
};

const Profile = () => {
  const params = useParams();

  const profile = data[params.username];

  return (
    <div>
      <h1> 케로로 소대원</h1>

      {profile ? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.description}</p>
        </div>
      ) : (
        <p>존재하지 않는 프로필입니다.</p>
      )}
    </div>
  );
};

export default Profile;

저는 케로로 소대원에 관한 정보를 알려주는 Profile 컴포넌트를 제작했습니다.

이제, APP.js 로 가서 다음과 같이 작업을 합니다.

				
					
//Projile 컴포넌트 불러오기
import Profile from "./Profile";

function App() {
  return (
    <Router>
      <Routes>
        {/* Profile 컴포넌트 사용하기 */}
        <Route path="/profiles/:username" element={<Profile />} />
        
      </Routes>
    </Router>
  );
}

export default App;

URL 파라미터로 사용할 부분을 : 을 통해 지정이 가능합니다.

만약 URL 파라미터를 여러 개 이용할 계획이다?

/projiles/:username/:field 와 같은 형태로 설정할 수 있습니다.

예제 코드

실제 쿼리 스트링을 통해서 나타나는 페이지를 확인하기 위해 다음과 같은 예시코드를 만들었습니다.

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

const KeroroList = () => {
  return (
    <div>
      <h1> 케로로 소대원 리스트</h1>
      <ul>
        <li>
          <Link to={"/profiles/keroro"}> 케로로 중사</Link>
        </li>
        <li>
          <Link to={"/profiles/giroro"}> 기로로 하사</Link>
        </li>
        <li>
          <Link to={"/profiles/dororo"}> 도로로 병장</Link>
        </li>
      </ul>
    </div>
  );
};

export default KeroroList;

이 코드를 실제로 구축한다면, 해당 페이지에서 링크를 통해 각 소대원의 프로필을 볼 수 있을 겁니다.

제가 미리 data 로 지정해둔 곳에는 keroro, giroro 밖에 없으니까 도로로 병장의 프로필은 존재하지 않는 프로필이 되겠네요.

실제가동

이런 식으로 실제로 나타나는 것을 볼 수 있습니다.

쿼리스트링

이번에는 라우트에서 쿼리스트링을 사용하는 방법입니다.

쿼리스트링의 사용에서는 URL 파라미터와 달리 Route 컴포넌트를 별도로 설정해야 하는 것이 없습니다.

이를 위해 다음과 같이 예제를 작성했습니다.

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

const KeroroList = () => {
  const location = useLocation();

  return (
    <div>
      <h1> 쿼리 스트링 테스트 </h1>

      <p>쿼리스트링 : {location.search}</p>
    </div>
  );
};

export default KeroroList;

이 페이지가 나타나는 본래 URL 이 example.com/list 라고 할까요?

pathname 은 example.com/list 라는 현재 주소 경로가 됩니다.

search 라는 것은 이제 이 주소 뒤에 있는 ? 문자를 포함한 모든 값들을 뜻합니다.

state 는 페이지로 이동할 때 임의로 넣을 수 있는 상태 값을 뜻합니다.

key 는 location 객체의 고유한 값으로, 초기에는 default 이지만 페이지가 변경될 때마다 고유의 값이 생성됩니다.

만약 example.com/list?detail=true&mode=1 과 같이 url 이 되어 있다면

lcoation.search 에는 ?detail=true&mode=1 전체가 할당이 됩니다.

여기서 이제 내가 원하는 key를 검색하고 값을 따로 빼내서 쓰고 싶겠죠.

이를 위해서 다음과 같이 코드를 수정할 수 있겠습니다.

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

const KeroroList = () => {
  const [useSearchParams, setSearchParams] = useSearchParams();

  const detail = setSearchParams.get("detail");
  const mode = setSearchParams.get("mode");

  const onToggleDetail = () => {
    setSearchParams({ mode, detail: detail === "true" ? false : true });
  };

  const onIncreaseMode = () => {
    const nextMode = mode === null ? 1 : parseInt(mode) + 1;
    setSearchParams({ mode: nextMode, detail });
  };

  return (
    <div>
      <h1> 라우터 테스트 </h1>
      <p>detail : {detail}</p>
      <p>mode : {mode}</p>

      <button onClick={onToggleDetail}>Toggle Detail</button>
      <button onClick={onIncreaseMode}>mode + 1</button>
    </div>
  );
};

export default KeroroList;

detail 과 mode 라는 값에 유동적으로 현재 url 의 쿼리스트링 값을 가져오는 것을 볼 수 있습니다.