useLocation

useLocation 을 통해 url 데이터를 받아 활용할 수 있다.
사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hook.
객체 형식으로 보여주기 때문에 location.key 형태로 접근할 수 있다!

navigate 로 데이터를 보내고 (두번째 인자로 state 속성 사용), location 으로 데이터를 받을 수 있다. ( + Link 도 state 로 데이터를 보낼 수 있다고 한다 ㅇ0ㅇ )

// 예시
const goToPage = () => {
	navigate("/main"), { state: productInfo }
}

const location = useLocation();

으로 useLocation 함수를 호출해주고, console 로 location 을 찍어주면,
이러한 형태의 객체를 볼 수 있다.
state 가 내가 넘긴 데이터이다. 객체 접근하여 데이터를 활용할 수 있다 !

로컬스토리지에 데이터를 저장하여, 다시 가져오는 방식으로 코드를 짜는 나에게, 일회용 데이터라면 state 로 넘겨줘도 된다는 멘토님의 효율적인 조언 ,, ㅁㅅ님 최고 ❤️‍🔥

function OrderRight() {
  const [data, setData] = useState('');
  const location = useLocation();
  console.log(location);

  useEffect(() => {
    if (localStorage.getItem('id')) {
      const getId = localStorage.getItem('id');
      setData(JSON.parse(getId));
      console.log(data);
    }
  }, []);

  return (
    <div className="orderRight">
      <div className="orderInfos">
        <OrderPriceInfos />
        <OrderProductInfos data={location.state} />
      </div>
      <OrderBtn />
    </div>
  );
}

전 연결 페이지에서 state 로 데이터를 전달하고, location으로 받았다.
가운데 코드는 내가 혼자 구글링해서 localStorage 로 데이터 전달하는 코드임 ㅋㅋ
location 을 찍어봤을 때, 객체 내 state key 값으로 접근해야 하기 때문에, 필요한 컴포넌트에 props 로 넘겨주었다.

function OrderProductInfos({ data }) {
  return (
    <div className="orderProductInfos">
      <div className="orderProductImg">
        <img src="images/order/productDetail_img_01.jpg" alt="상품이미지" />
      </div>
      <div className="orderProductMiniInfos">
        <div className="miniInfoDetail">
          <p>{data.plant_name}</p>
        </div>
        <div>
          <p className="price">
            {parseInt(data.plant_price).toLocaleString()}₩
          </p>
        </div>
      </div>
    </div>
  );
}

이제 state 객체 내에 필요한 키에 접근하여 데이터를 넣어주면 된다 ! 😆