4월26일(수) A컴포넌트에서 C컴포넌트로 props전달 (B거치지 않고)

import { createContext, useContext, useState } from 'react';

// createContext 함수를 사용하여 컨텍스트를 생성합니다.
export const MidPointContext = createContext({});

function SearchedKeywordLandingPage() {
  ...
  // midPoint 값을 전역 상태로 관리합니다.
  const [midPoint, setMidPoint] = useState(null);

  return (
    // Provider 컴포넌트를 사용하여 midPoint 값을 제공합니다.
    <MidPointContext.Provider value={midPoint}>
      ...
      <C />
    </MidPointContext.Provider>
  );
}

function C() {
  // useContext Hook을 사용하여 MidPointContext 컨텍스트 값을 가져옵니다.
  const midPoint = useContext(MidPointContext);

  // midPoint 값을 사용합니다.
  console.log(midPoint);

  return <div>{midPoint ? `lat: ${midPoint.lat}, lng: ${midPoint.lng}` : '중간 지점이 없습니다.'}</div>;
}

a(SearchKeywordModalPortal.jsx)->c(MapMidPoint.js)로 props전달하려했지만 계속해서 실패. 이번에는 더 이상 한가지 방법에 매달리지 않기로 함. 그래서 React의 Context API사용 결정. Redux사용할까 했지만 이거 하나로 project 막바지에 redux를 도입하기는 너무 큰 변화였다. 그래서 Context API선택. 다행이 예쁘게 잘 props 전달 되었다.

[Chat GPT 참고]
해당 코드에서 midPoint의 lat, lng 값을 C 컴포넌트로 전달하고자 할 때, C 컴포넌트에서 값을 받을 수 있는 구조를 구성해야 합니다.

보통 React 애플리케이션에서 데이터는 상위 컴포넌트에서 하위 컴포넌트로 전달됩니다. 하지만 중간 지점을 구하는 페이지가 다른 페이지로 이동하면서 중간 지점의 데이터를 전달해야 하는 경우 상위 컴포넌트가 없기 때문에 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식으로는 데이터를 전달할 수 없습니다. 이럴 때는 React의 Context API를 사용하여 데이터를 전역적으로 관리하거나, 상태 관리 라이브러리인 Redux, MobX 등을 사용하여 전역 상태 관리를 할 수 있습니다.

따라서 해당 코드에서는 중간 지점의 데이터를 전역 상태 관리 라이브러리를 사용하여 관리하거나, React의 Context API를 사용하여 전역 데이터로 관리한 후, C 컴포넌트에서 해당 데이터를 가져와 사용하는 방식으로 구성하는 것이 좋습니다.

Redux나 MobX와 같은 라이브러리를 사용하는 경우, 라이브러리의 도움을 받아 전역 상태를 관리할 수 있습니다. Context API를 사용하는 경우, createContext 함수를 사용하여 컨텍스트를 생성한 후, Provider 컴포넌트로 전역 데이터를 제공합니다. 이후 C 컴포넌트에서 useContext Hook을 사용하여 컨텍스트 값을 가져와 사용할 수 있습니다.

다음은 Context API를 사용하여 전역 데이터를 관리하는 예시 코드입니다. 코드를 적용하면 midPoint 값이 전역 데이터로 관리되며, C 컴포넌트에서 midPoint 값을 가져올 수 있습니다.