React 컴포넌트 간 상태 공유 (Context API)

[ Gemini 대화 요약 ] React 컴포넌트 간 상태 공유 (Context API)

1. 최종 목표

interestPage.tsx에서 사용자가 SelectButtonGroup 컴포넌트를 통해 '관심사'를 선택하면, 그 결과가 형제 컴포넌트인 SelectedInterests에 실시간으로 표시되도록 하는 것.

2. 핵심 문제 및 해결 과정

• 문제: SelectButtonGroup과 SelectedInterests는 부모(interestPage)는 같지만 서로는 관계가 없는 형제(sibling) 컴포넌트입니다. 한쪽에서 일어난 일을 다른 쪽이 직접 알 방법이 없습니다.
• 해결책:
  1. 중앙 저장소(Context API) 생성: 모든 관련 컴포넌트가 구독할 수 있는 중앙 데이터 저장소인 InterestContext.tsx를 만들었습니다. 이 컨텍스트는 selectedInterests(선택된 관심사 배열) 상태를 보관합니다.
  2. 저장소 제공: 앱의 최상단(App.tsx)을 InterestProvider로 감싸서, 앱 내 모든 컴포넌트가 InterestContext에 접근할 수 있는 권한을 부여했습니다.
  3. 중재자(Mediator) 패턴 활용: 부모 컴포넌트인 interestPage.tsx가 '중재자' 또는 '중앙 관제실' 역할을 하도록 설계했습니다.
     • interestPage는 useInterestContext를 통해 중앙 저장소의상태(selectedInterests)와 상태 변경 함수(setSelectedInterests)를 가져옵니다.
     • SelectButtonGroup에게는 상태를 변경시키는 함수(handleInterestsSelectionChange)를 onSelectionChange라는 props로 내려줍니다.
     • SelectedInterests에게는 현재 상태 값(selectedInterests)을 props로 내려줍니다.
  4. 컴포넌트 수정:
     • SelectedInterests.tsx: ID만 표시되던 문제를 해결하기 위해, 전체 interests 배열을 props로 받아 ID에 해당하는 label을 찾아 표시하도록 수정했습니다.

3. 처음에 이해가 어려웠던 이유: "데이터는 위에서 아래로 흐른다"
   아마 SelectButtonGroup 컴포넌트가 직접 컨텍스트의 상태를 바꿔야 한다고 생각하셨을가능성이 높습니다. "선택이 일어나는 곳에서 상태를 바꿔야지" 라는 생각은 매우 자연스럽습니다.

   하지만 React에서는 '단방향 데이터 흐름(One-way data flow)' 원칙이 매우 중요합니다. 데이터는 항상 부모에서 자식으로, 즉 위에서 아래로 흐릅니다.

이 원칙 때문에 자식 컴포넌트가 부모나 컨텍스트의 상태를 직접 수정하는 대신,"상태를 바꿔달라고 부모에게 요청하는 함수"를 props로 받아 실행하는 방식을 사용합니다.

• 잘못된 생각: 자식(SelectButtonGroup)이 부모(Context)의 지갑에서 직접 돈을 꺼낸다.
• React 방식: 자식(SelectButtonGroup)이 부모에게 받은 전화기(onSelectionChange prop)로 "아빠, 용돈 주세요!"라고 요청하면, 아빠(interestPage)가 자신의 지갑(Context)에서 돈을 꺼내주는 것과 같습니다.