이전페이지에서 push 로 데이터 받아오기

React 페이지에서 다른 페이지로 push를 통해 객체를 전달하고,
전달받은 페이지에서 useRouter 훅을 이용하여 객체 값을 사용하는 방법을 설명하겠습니다.

 // 페이지 A
import { useRouter } from 'next/navigation';

const PageA = () => {
  const router = useRouter();
  const objectToPass = { name: 'John Doe', age: 30 };

  const handleClick = () => {
    // push 메서드를 사용하여 페이지 이동
    // 쿼리 매개변수에 객체를 문자열로 변환하여 전달
    router.push(`/pageB?data=${JSON.stringify(objectToPass)}`);
  };

  return (
    <button onClick={handleClick}>
      페이지 B로 이동 (객체 전달)
    </button>
  );
};

export default PageA;

페이지 A에서는 useRouter 훅을 사용하여 router 객체를 가져옵니다. 전달할 객체 objectToPass를 생성하고, 버튼 클릭 시 router.push 메서드를 사용하여 페이지 B로 이동합니다. 이때, 쿼리 매개변수 data에 JSON.stringify()를 사용하여 객체를 문자열로 변환하여 전달합니다.

 

// 페이지 B
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

const PageB = () => {

  const router = useRouter();
  const [receivedObject, setReceivedObject] = useState<any>(null);

  useEffect(() => {
    // 쿼리 매개변수에서 문자열 데이터를 가져옴
    const dataString = router.query.data;

    // 문자열 데이터가 존재하는 경우 JSON.parse()를 사용하여 객체로 변환
    let parsedObject = null;
    try{
        if (typeof dataString === 'string') {
        parsedObject = JSON.parse(dataString);
        }
    }catch(e){
        console.log('JSON parsing error:', e);
    }

    // 변환된 객체를 상태에 저장
    setReceivedObject(parsedObject);

  }, [router.query]);


  // const receivedObject = ; // 쿼리 매개변수에서 data 추출

  return (
    <div>
      {/* 객체 값 표시 */}
       {receivedObject && (
        <>
          <p>이름: {receivedObject.name}</p>
          <p>나이: {receivedObject.age}</p>
        </>
      )}
      
    </div>
  );
};


export default PageB;

 

페이지 B에서는 useRouter 훅을 사용하여 router 객체를 가져옵니다. useEffect 훅을 사용하여 쿼리 매개변수 data에서 문자열 데이터를 가져오고, JSON.parse()를 사용하여 객체로 변환합니다. 변환된 객체는 useState 훅을 사용하여 상태에 저장하고, UI에 표시합니다. useEffect의 두 번째 인자로 [router.query]를 전달하여 쿼리 매개변수가 변경될 때마다 useEffect 내부 로직이 실행되도록 합니다. try-catch 블록을 사용하여 JSON parsing 과정에서 발생할 수 있는 에러를 처리합니다.

이처럼 JSON.stringify()와 JSON.parse()를 사용하여 객체를 문자열로 변환하고 다시 객체로 변환하는 방법을 통해 페이지 간에 객체 데이터를 전달하고 사용할 수 있습니다. 주의할 점은 쿼리 매개변수를 통해 전달되는 데이터는 문자열로 변환되기 때문에, 객체의 메서드는 전달되지 않습니다. 메서드가 필요한 경우 다른 방법을 고려해야 합니다. 또한 URLSearchParams API를 사용하여 쿼리 매개변수를 파싱하는 방법도 있습니다.