인프런 커뮤니티 질문&답변

hwuiinn님의 프로필 이미지
hwuiinn

작성한 질문수

Next + React Query로 SNS 서비스 만들기

홈탭 만들면서 Context API 적용해보기

context provider에 관한 질문

작성

·

237

·

수정됨

0

Tab.tsx에서 "추천"과 "팔로우 중"을 클릭하면 상태가 "rec", "fol"로 변경되는 것을 확인했습니다.

 

이후 TabProvider.tsx 파일을 만들고 <TabProvider>로 상태를 공유할 하위 컴포넌트를 감싸는 것 까지 되었습니다.

 

 TabProvider.tsx에 있는 state를 하위 컴포넌트가 구독하여 상태 공유를 할 수 있는 것으로 알고있습니다.

여기서 질문입니다.

  1. TabProvider.tsx로 감싼 하위 컴포넌트인 Tab.tsx에서 상태가 변경되었을 때, TabProvider에 변경된 상태를 공유할 수 있는지 궁금합니다.
    (자식 컴포넌트에서 상태가 변경되면, Provider 상태도 변경할 수 있는지)

     

Post.tsx에서 상태공유 확인하는데, Tab.tsx에서 상태가 변경되어도 Provider에서는 변경되지 않아 질문 올립니다..

 

import { TabContext } from "../home/_component/TabProvider";

const Post = () => {
  const { tab } = useContext(TabContext);

  return (
    <>
      <div>TabContext Value = {tab}</div>
    </>
  );
};

 

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

그 state조차도 TabProvider의 state로 만들고 context에 전달해서 쓰시면 됩니다.

hwuiinn님의 프로필 이미지
hwuiinn

작성한 질문수

질문하기