Header 컴포넌트 부분에 대해 질문있습니다.
안녕하세요 공부를 하다가 궁금한 점이 생겨 질문을 드립니다. Header 컴포넌트에서 화살표 버튼을 각각 클릭하면 날짜가 증가되었다 감소되는 기능에서 이 부분의 state인 pivotDate를 Header컴포넌트가 아닌 Home컴포넌트에 작성된 이유는 날짜가 바뀌면 아래 리스트도 해당날짜에 작성된 리스트를 보여 줘야하니 전체를 관리하는 Home컴포넌트에 작성이 된 것인가요?
그리고 마지막으로 혼자 공부를 하다가 위 내용처럼 이 코드가 부모컴포넌트에 관리를 하는 것인지 그냥 Header처럼 해당기능을 해당 컴포넌트에 작성을 해야되는 것인지 감이 조금 잡히지 않는데 조금 쉽게 이해할 수 있는 방법이 혹시 있는지 궁금합니다.
답변 2
0
안녕하세요 이정환입니다.
네 말씀하신 내용이 맞습니다. 더 구체적으로 말씀드리자면 해당 State를 공유받아야 하는 컴포넌트들의 최소 조상이 되는 컴포넌트가 Home이기 때문에 그렇습니다.
React의 State는 반드시 해당 State를 공유받아야 하는 컴포넌트들의 최소 조상이 되는 컴포넌트에 생성해 주셔야 합니다. 예를 들어 다음과 같은 컴포넌트 트리가 있을때, ChildB와 ChildC에 모두 공유되어야 하는 State가 있다면 두 컴포넌트의 최소 조상인 ChildA 컴포넌트에 State가 생성되어야 합니다.
App
⌞ ChildA
⌞ ChildB
⌞ ChildC
이 내용에 대해서는 우리 강의의 6.3) 기능 구현하기 챕터의 3분 30초 경 부터 자세히 다루고 있으니 참고하시면 도움이 될 것 같습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.
리액트 컴포넌트의 상태 관리에 대한 질문을 주셨군요. 질문 주신 부분에 대해서는 상태(like pivotDate)가 어디에 필요하냐에 따라 결정됩니다. pivotDate는 날짜 변경에 사용되며, 이는 아래 리스트가 특정 날짜에 작성된 항목을 보여주는 기능을 수행하므로, 상태를 Home 컴포넌트에서 관리하여 전체 컴포넌트가 접근할 수 있도록 하는 것이 적절합니다.
왜 Home 컴포넌트에 상태를 두는가?
1. 데이터 흐름: pivotDate가 변경되면 이 날짜에 따라 필터링된 리스트를 보여줘야 하므로, Date 변경 상태는 Home 같은 상위 컴포넌트에서 관리하여 하위로 내려주는 것이 자연스럽습니다.
재사용성: 만약 상태를 Header에 두었다면, 다른 컴포넌트가 이 상태에 영향을 미치거나 이를 기준으로 화면을 업데이트 하는 것이 어려울 수 있습니다. 그러므로 Home에서 관리하여 모든 자식 컴포넌트에 동일한 기준으로 상태를 공급합니다.
유지 가능성: 하나의 컴포넌트에 상태 관리를 집중 시키면 시간 경과에 따른 코드 유지보수가 용이합니다.
상태를 어디에 두어야 할지 쉽게 결정하는 방법:
- Lifting State Up: 여러 컴포넌트가 동일한 데이터와 연관되어 있으면, 가장 가까운 공통 부모 컴포넌트로 상태를 끌어올려야 합니다.
- RCU (React Component Usage) Rule: 컴포넌트 간에 데이터를 공유하고 있다면, 그 데이터를 필요로 하는 가장 상위에 있는 컴포넌트에서 관리합니다.
- 읽기/쓰기 요구사항: 데이터를 생성하거나 변경하는 코드와 이를 사용하는 코드를 동일한 컴포넌트 내에 유지하려고 노력합니다.
관련해서 더 자세한 설명을 보고 싶으시면 아래의 답변을 참고하시면 도움될 것입니다:
- [질문드립니다 (강의)]질문 드립니다. - 상태 변경과 리렌더링 관련 설명
- [diaryList 날짜 필터 관련]diaryList 날짜 필터 관련 (강의) - 유사한 상태 관리 관련 문제 설명
- [한입리액트 섹션 6 - 페이지 구현 - 홈(/) 코드]한입리액트 섹션 6 - 코드 (강의) - 렌더링 및 상태 사용 예시
저는 질문자님 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드립니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
47
2
데이터 로딩중 화면만 계속 나와요!!
0
53
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
81
3
Date 객체에 관련하여 질문드립니다.
0
84
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
107
2
onMouseEnter 관련 문의 드립니다
0
91
3
배열의 렌더링 관련 질문 드립니다.
0
72
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
112
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
134
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
111
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
178
2
87강 필터 함수 질문
0
68
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2