state통해 데이터 전달

React Router를 사용하여 컴포넌트 간에 state를 통해 데이터를 전달하는 방법

이 방법은 주로 페이지 간의 데이터 전송에 유용.

 

1. 데이터 전달

• 데이터를 전달할 컴포넌트: navigate 함수를 사용하여 다른 페이지로 이동할 때 state를 함께 전달.
• navigate 함수는 두 개의 인자를 받을 수 있다 :
  • 첫 번째 인자는 이동할 경로.
  • 두 번째 인자는 선택적인 객체로, state를 포함할 수 있다.

// 예: OrganismProjectItem.jsx
const handleClick = async () => {
  if (onClick) {
    onClick();
  } else if (isNoData) {
    navigate("/ProjectCreate");
  } else {
    // 프로젝트 데이터를 state로 전달하여 DashBoard 페이지로 이동
    navigate("/DashBoard", { state: { project: project } });
  }
};

 

2. 데이터 수신

• 데이터를 수신할 컴포넌트: useLocation 훅을 사용하여 전달된 state를 가져옴.
• useLocation: 현재 위치의 정보를 가져오는 훅으로, state를 통해 전달된 데이터를 사용할 수 있음.

// 예: PageDashBoard.jsx
import { useLocation } from "react-router-dom";

const PageDashBoard = () => {
  const location = useLocation();
  const project = location.state?.project; // state로 전달된 project 객체

  // project를 사용하여 UI 구성
  return (
    <div>
      <h1>{project?.projectTitle}</h1>
      <p>{project?.projectAnalysis.business_analysis}</p>
    </div>
  );
};

 

3. 전체 흐름

1. 이벤트 발생: 사용자가 특정 버튼을 클릭하거나 특정 이벤트가 발생.
2. 데이터 전달: navigate 함수를 호출하면서 state를 포함하여 다른 페이지로 이동함.
3. 데이터 수신: 수신 페이지에서 useLocation 훅을 사용하여 전달된 state를 가져옴.

 

4. 주의사항

• state는 페이지가 새로 고침되거나 사용자가 브라우저의 뒤로 가기 버튼을 클릭할 때 사라질 수 있다. 따라서 중요한 데이터는 context, redux, 또는 localStorage와 같은 다른 상태 관리 방법을 사용하는 것이 좋습니다.
• state를 통해 전달된 데이터는 객체 형태로 전달되므로, 수신하는 컴포넌트에서 적절한 구조로 접근해야 한다.

 

예시2 )

아래는 로그인 페이지에서 비밀번호 재설정 페이지로 이동할 때 title을 state로 전달하는 예제.

• 데이터를 전달할 컴포넌트:

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

const LoginPage = () => {
  const navigate = useNavigate();

  const handleResetPassword = () => {
    // 비밀번호 재설정 페이지로 이동하면서 title을 전달
    navigate('/rewrite-password', { state: { title: '비밀번호 설정' } });
  };

  return (
    <div>
      <h1>로그인 페이지</h1>
      <button onClick={handleResetPassword}>비밀번호 재설정</button>
    </div>
  );
};

export default LoginPage;

이제 비밀번호 재설정 페이지에서 location.state를 사용하여 전달된 title을 사용할 수 있다

• 데이터를 수신할 컴포넌트 : 비밀번호 재설정 페이지에서 데이터 사용하기

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

const RewritePass = () => {
  const location = useLocation();
  const { title } = location.state || {}; // title을 가져오고, 없으면 undefined

  return (
    <div>
      <h1>{title || '비밀번호 재설정'}</h1>
      {/* 나머지 컴포넌트 코드 */}
    </div>
  );
};

export default RewritePass;

이렇게 하면 로그인 페이지에서 비밀번호 재설정 페이지로 이동할 때, 원하는 제목을 전달하여 동적으로 제목을 설정할 수 있음.