리액트 | 페이지를 이동할 때 데이터도 함께 넘기는 방법

1. URL 매개변수 이용하기

URL 매개 변수를 사용하여 데이터를 전달할 수 있습니다. 예를 들어, /products?category=shoes와 같은 URL을 사용하여 카테고리가 "신발"인 제품 목록 페이지로 이동할 수 있습니다. 이 방법은 React Router의 Link 컴포넌트를 사용하여 구현할 수 있습니다.

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

function MyComponent() {
  const categoryId = 123;

  return (
    <Link to={`/products?category=${categoryId}`}>상품 목록</Link>
  );
}

2. React 컴포넌트 props로 전달하기

Link 컴포넌트 대신, 다른 페이지로 이동할 때 React 컴포넌트 props를 전달하여 데이터를 전달할 수도 있습니다. 예를 들어, 아래와 같이 상품 ID를 전달할 수 있습니다.

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();
  const productId = 456;

  function handleClick() {
    history.push('/product', { productId });
  }

  return (
    <button onClick={handleClick}>제품 상세 페이지로 이동</button>
  );
}

3. 상태관리 라이브러리 이용하기

Redux, MobX 등의 상태 관리 라이브러리를 사용하여 데이터를 전달할 수도 있습니다. 상태 관리 라이브러리를 사용하면 다른 페이지에서도 동일한 상태를 공유할 수 있습니다.

✍🏻 결론

위의 방법 중 어떤 것을 선택할지는 상황에 따라 다를 수 있습니다. URL 매개 변수를 사용하면 브라우저의 뒤로 가기 버튼 등이 잘 작동하고, 북마크나 공유하기 등의 기능을 구현하기도 쉽습니다. 반면에 React 컴포넌트 props를 사용하면 보다 복잡한 데이터를 전달하기 용이하고, 상태 관리 라이브러리를 사용하면 애플리케이션 전체에서 데이터를 공유할 수 있습니다.