2틀동안 진짜 react-query로 해서 수없이 시도. 안 됌. 도저히 안 감. 계속 페이지 이동되면 값 휘발. 그래서 다시 contextAPI. 값 잘 전달됨. 쉽게 전달. 근데 어떠한 방법을 해도 페이지 이동시 휘발. 그래서 다시 react-query활용해서 해보려 하지만 전달 자체가 안됌. contextAPI로는 잘 가고 있음.
그래서 그걸 살려보려고 무진장 애씀. useNavigate, useHistory, param값으로 변경 등등. 안되. 그러다 contextAPI지우고 혹시나 쿼리 시도. 잘감.. 값도 잘 보전... contextAPI랑 프롭스로 가는 거랑, 그 코드 남아있어서 쿼리로 동작 안 한듯.... 하...
const queryClient = useQueryClient();
const fuckingHell = midPoint
queryClient.setQueryData(['FUCK'], fuckingHell);이렇게 A컴포넌트에서 전달.
그리고
<Link href={'/mapmidpoint'}
>중간지점탐색</Link>이렇게 link로 페이지 이동 후
const queryClient = useQueryClient();
const midPointProp = queryClient.getQueryData({queryKey: ['FUCK']});이렇게 전달 받음. 페이지 이동시에도 값 잘 유지..
정말 오만 삽질을 했다. 오늘 트러블슈팅에 관한 강의를 듣고 침착하게 코드 다 지우고 다시 처음으로 돌아가서 하나하나 해보려고 했는데 그래서 해결이 된 거 같다. 사실 몇시간이면 구현하는 기능일 거라 설레발쳤는데, 갑자기 생각지도 못한 곳에서 ( 페이지 이동시 전달 값 날라가는거) 막혀서 당황하고, 크게 그림을 보며, 하나하나 차분히 해볼 생각못하고 정말 너무 마음이 급급하고 답답하여서 굉장히 좁은 시야로 뭔가 체계적이지 않게 주먹구구식으로 트러블슈팅을 하려 했던 거 같다. 그래서 사실 한 참 전에 다 끝냈을 문제를 계속 잡고 있었던 거 같다. 당황하고 답답하고 초조하여도, 시야가 좁아지지 말고 멀리서 차분히 문제 해결을 해내는 그런 침착성을 길러나가야 하겠다.
지금보니 Link를 쓰지 않고
const moveToMapMidPointButtonClickHandler = () => {
router.push('/mapmidpoint',
);
}이렇게 버튼에 적용해서 페이지 이동하여도 값은 잘 저장이 된다.
진지하게 Redux를 지금에서야 도입해야하나 정말 고민 많이 했는데.... 다행이다.
[Chat GPT 참고]
B 컴포넌트가 페이지로 이동될 때, 이전 컴포넌트에서 전달된 props가 undefined가 되는 이유는 페이지 이동 시 B 컴포넌트가 새로 mount되면서 PassPropsWithContextAPI 컴포넌트가 다시 실행되기 때문입니다. 따라서 이전 컴포넌트에서 전달된 값을 유지하려면 PassPropsWithContextAPI 컴포넌트를 B 컴포넌트가 mount되는 동안에도 유지해야 합니다.
이를 위해서는 PassPropsWithContextAPI 컴포넌트를 A 컴포넌트에서 렌더링하지 않고 최상위 컴포넌트(App 등)에서 렌더링해야 합니다. 그리고 B 컴포넌트에서 useContext를 사용하여 값을 가져오면 됩니다. 이렇게 하면 페이지 이동 시 값이 유지됩니다.
최상위 컴포넌트에서 렌더링 하는 방법 말고 a컴포넌트에서 b컴포넌트로 직접 전달할 수 있는 방법은 없니?
React에서 컴포넌트는 일반적으로 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 방식으로 데이터를 전달합니다. 따라서 a컴포넌트에서 b컴포넌트로 직접 props를 전달하는 것은 가능합니다.
만약 a컴포넌트와 b컴포넌트가 직접적으로 관련이 있다면, a컴포넌트에서 b컴포넌트로 props를 전달하는 것이 좋습니다. 이 경우 a컴포넌트에서 b컴포넌트로 전달할 props를 정의하고, b컴포넌트에서 해당 props를 받아서 사용하면 됩니다.
하지만 a컴포넌트와 b컴포넌트가 직접적으로 연관성이 없다면, React의 Context API나 Redux와 같은 상태 관리 라이브러리를 사용하는 것이 좋습니다. 이를 통해 컴포넌트 간의 데이터 전달과 관리가 용이해집니다.
React Query는 컴포넌트 간의 상태 관리를 위한 라이브러리 중 하나입니다. 이 라이브러리를 활용하면, API 호출 결과를 캐시하고, 상태 관리를 쉽게 할 수 있습니다.
따라서, React Query를 활용해서 컴포넌트 간에 데이터를 전달하는 것은 가능합니다. 예를 들어, A 컴포넌트에서 API를 호출하여 가져온 데이터를 React Query의 useQuery 훅을 사용해 캐시하고, B 컴포넌트에서도 이 데이터를 사용할 수 있도록 전달하는 것이 가능합니다.
이를 위해서는, A 컴포넌트에서 useQuery를 사용해 데이터를 캐시하고, 해당 데이터를 컴포넌트 외부에서 접근 가능한 곳에 저장해야 합니다. 이후, B 컴포넌트에서도 동일한 데이터를 캐시하고, 이전에 저장한 데이터를 사용할 수 있도록 설정하면 됩니다.
