props Dirlling을 방지하기 위해 Context를 사용하지만..
안녕하세요..!
결국 Context도 이 컨테이너 안에 데이터를 몽땅 넣을 순 없으니 불필요한 렌더링을 최소화하기 위해 용도에 따라 분리하는것이 좋다라고 알려주셔서 잘 이해가 되었습니다 : )
그런데 복잡한 대형 프로젝트에서는 결국 Context도 6개,7개 .. 늘어나다보면,
<Context1.Provider>
<Context2.Provider>
<Context3.Provider>
<Context4.Provider>
<ContextN.Provider>
.......
이런식으로 늘어날텐데, Context도 몇개 이상 늘어나지 않도록 어느정도는 그룹핑을 해야할 것 같다고 생각이 듭니다.
코드 가독성을 유지하기 위해서 하위 컴포넌트들에게 전달할 데이터들을 최대 몇개 정도의 Context로 관리하는게 이상적일까요?..
답변 2
1
안녕하세요 이정환입니다.
우선 멋진 질문 감사합니다! 사실 진영님께서 말씀주신 그 부분이 바로 Context의 단점이자 Redux나 zustand등의 별도 상태관리 도구가 필요한 이유중 하나입니다.
전역으로 관리해야 할 데이터가 많다면 Context는 결국 중첩됩니다. 따라서 관리할 데이터가 정말 많아지면 Context 중첩도 정말 많아지게 됩니다 ㅠㅠ 여담으로 이를 마치 Callback Hell과 비슷하다 해서 Prodiver Hell 이라고 부르기도 합니다.
따라서 프로젝트의 데이터가 복잡하여 많은 Context의 중첩이 발생할 것 같다면 별도의 상태관리 도구를 도입하시는걸 추천드립니다!
0
안녕하세요, 인프런 AI 인턴입니다.
진영님의 질문은 Context를 사용하면서도 코드의 가독성을 유지하기 위해 데이터를 전달할 때 적절한 Context의 분할 수를 결정하는 방법에 대한 것으로 이해됩니다. 이와 관련하여 Context의 사용과 그룹핑, 최적화에 대해 다룬 여러 질문 중에서 비슷한 주제를 다룬 예시가 있습니다.
다음은 여러 Context를 사용하고 그룹핑하는 방법, 그리고 컴포넌트 최적화에 대한 지식공유자의 설명입니다:
“data와 onCreate, onRemove, onEdit 을 같은 context에서 전달하면 안되는 이유”에서는 Context 내 데이터와 함수를 함께 사용할 때 발생할 수 있는 최적화 문제와 Context를 분리하여 사용하는 방법에 대해 설명하고 있습니다.
“중첩 Context 관련 질문있습니다.”에서는 Context를 분리하여 사용함으로써 최적화를 유지할 수 있는 방법에 대해 설명합니다.
이러한 기존 답변들은 Context의 사용 방법과 분리, 최적화의 중요성에 대해 설명하고 있지만, 직접적으로 “최대 몇 개의 Context로 관리하는 것이 이상적인지”에 대한 명확한 답변을 제공하진 않습니다. 이는 사실 프로젝트의 규모, 구조, 요구사항 등에 따라 달라질 수 있는 부분이기 때문입니다. 가장 중요한 것은 Context를 사용할 때, 필요한 최소한으로 유지하면서도, 각 Context가 명확한 책임과 역할을 가지고 있어야 합니다. 따라서 “적절한 수”는 프로젝트의 특성에 따라 판단될 수 있으며, 무엇보다도 컴포넌트의 재사용성, 유지 보수성, 테스트 용이성 등을 고려하여 결정해야 합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
데이터 로딩중 화면만 계속 나와요!!
0
54
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
108
2
onMouseEnter 관련 문의 드립니다
0
92
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
112
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
135
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
112
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
178
2
87강 필터 함수 질문
0
68
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2