React에서 상태 관리 없이 URL 파라미터로 데이터 전달하기

React 애플리케이션에서 상태 관리를 사용하지 않고 컴포넌트 간에 데이터를 전달해야 할 때, URL 파라미터를 활용할 수 있습니다. 이 방법은 특히 간단한 데이터나 페이지 간 정보 전달 시 유용하며, Redux나 Context API 같은 상태 관리 도구를 도입하지 않아도 됩니다.

1. URL 파라미터란?

URL 파라미터는 URL의 끝에 "?key=value" 형태로 붙는 쿼리 스트링(query string)을 의미합니다. 예를 들어 "/detail?item=apple"에서 item=apple이 URL 파라미터입니다. React 라우팅 라이브러리에서 이를 쉽게 읽고 사용할 수 있습니다.

2. React Router를 이용해 URL 파라미터 받기

React Router의 useLocation 훅을 사용하면 현재 URL 쿼리 스트링을 가져올 수 있습니다. URLSearchParams 객체를 활용하면 특정 파라미터 값을 손쉽게 추출할 수 있습니다.

import React from 'react';
import { useLocation } from 'react-router-dom';

function DetailPage() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const item = params.get('item');

  return (
    <div>
      <h2>선택한 항목: {item || '없음'}</h2>
    </div>
  );
}

export default DetailPage;

3. URL 파라미터를 이용해 데이터 전달하기

다음은 목록 페이지에서 URL 파라미터를 포함해 링크를 만드는 간단한 예입니다.

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

function ListPage() {
  const items = ['apple', 'banana', 'cherry'];

  return (
    <ul>
      {items.map(item => (
        <li key={item}>
          <Link to={`/detail?item=${encodeURIComponent(item)}`}>{item} 상세보기</Link>
        </li>
      ))}
    </ul>
  );
}

export default ListPage;

4. 주의사항

• URL에 노출되는 데이터이므로 민감한 정보는 절대 포함하지 않아야 합니다.
• 복잡한 데이터는 JSON 직렬화 후 인코딩하여도 URL 길이 제한에 걸릴 수 있습니다.
• 사용자 경험을 고려해 URL 파라미터가 빈 값이거나 유효하지 않은 경우 처리 로직을 구현하는 것이 좋습니다.

이처럼 React에서 상태 관리 없이 간단하게 URL 파라미터를 활용하면, 빠르고 가볍게 페이지 간 데이터 전달이 가능합니다. 실무에서 간단한 정보 전달이 필요할 때 URL 파라미터 사용을 적극 고려해 보시기 바랍니다.