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

안녕하세요 이정환입니다.

네 말씀하신 내용이 맞습니다. 더 구체적으로 말씀드리자면 해당 State를 공유받아야 하는 컴포넌트들의 최소 조상이 되는 컴포넌트가 Home이기 때문에 그렇습니다.

React의 State는 반드시 해당 State를 공유받아야 하는 컴포넌트들의 최소 조상이 되는 컴포넌트에 생성해 주셔야 합니다. 예를 들어 다음과 같은 컴포넌트 트리가 있을때, ChildB와 ChildC에 모두 공유되어야 하는 State가 있다면 두 컴포넌트의 최소 조상인 ChildA 컴포넌트에 State가 생성되어야 합니다.

App
⌞ ChildA
⌞ ChildB
⌞ ChildC

이 내용에 대해서는 우리 강의의 6.3) 기능 구현하기 챕터의 3분 30초 경 부터 자세히 다루고 있으니 참고하시면 도움이 될 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.

리액트 컴포넌트의 상태 관리에 대한 질문을 주셨군요. 질문 주신 부분에 대해서는 상태(like pivotDate)가 어디에 필요하냐에 따라 결정됩니다. pivotDate는 날짜 변경에 사용되며, 이는 아래 리스트가 특정 날짜에 작성된 항목을 보여주는 기능을 수행하므로, 상태를 Home 컴포넌트에서 관리하여 전체 컴포넌트가 접근할 수 있도록 하는 것이 적절합니다.

왜 Home 컴포넌트에 상태를 두는가?
1. 데이터 흐름: pivotDate가 변경되면 이 날짜에 따라 필터링된 리스트를 보여줘야 하므로, Date 변경 상태는 Home 같은 상위 컴포넌트에서 관리하여 하위로 내려주는 것이 자연스럽습니다.

2. 재사용성: 만약 상태를 Header에 두었다면, 다른 컴포넌트가 이 상태에 영향을 미치거나 이를 기준으로 화면을 업데이트 하는 것이 어려울 수 있습니다. 그러므로 Home에서 관리하여 모든 자식 컴포넌트에 동일한 기준으로 상태를 공급합니다.

3. 유지 가능성: 하나의 컴포넌트에 상태 관리를 집중 시키면 시간 경과에 따른 코드 유지보수가 용이합니다.

상태를 어디에 두어야 할지 쉽게 결정하는 방법:
- Lifting State Up: 여러 컴포넌트가 동일한 데이터와 연관되어 있으면, 가장 가까운 공통 부모 컴포넌트로 상태를 끌어올려야 합니다.
- RCU (React Component Usage) Rule: 컴포넌트 간에 데이터를 공유하고 있다면, 그 데이터를 필요로 하는 가장 상위에 있는 컴포넌트에서 관리합니다.
- 읽기/쓰기 요구사항: 데이터를 생성하거나 변경하는 코드와 이를 사용하는 코드를 동일한 컴포넌트 내에 유지하려고 노력합니다.

관련해서 더 자세한 설명을 보고 싶으시면 아래의 답변을 참고하시면 도움될 것입니다:

• [질문드립니다 (강의)]질문 드립니다. - 상태 변경과 리렌더링 관련 설명
  
• [diaryList 날짜 필터 관련]diaryList 날짜 필터 관련 (강의) - 유사한 상태 관리 관련 문제 설명
  
• [한입리액트 섹션 6 - 페이지 구현 - 홈(/) 코드]한입리액트 섹션 6 - 코드 (강의) - 렌더링 및 상태 사용 예시
  

저는 질문자님 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드립니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.