일기 관리 기능 구현하기2 강의 질문있습니다.

Question

현재 일기 관리 기능 구현하기2 부분의 강의를 보고 있는데 강의에서 const DiaryStateContext = createContext(); const DiaryDispatchContext = createContext(); 이렇게 createContext를 두번 작성이 되었고 또 DiaryStateContext는 value로 data를 DiaryDispatchContext는 value로 onCreate, onUpdate, onDelete 이렇게 각각 보내는데 왜 이렇게 두번작성을 하는 것인지 그리고 그냥 DiaryStateContext 이 부분에 value로 data와 onCreate, onUpdate, onDelete 이걸 같이 보내면 안되는건가요?

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 이 부분은 최적화를 위한 것으로 우리 강의의 11.3) Context 분리하기 에서 자세히 다루고 있습니다. 위 강의에서 사용된 예제와 거의 비슷한 방식이니 한번 다시 돌아보시는걸 추천드려요! 추가로 아래의 아티클을 참고하시는 것도 추천드립니다. https://www.winterlood.com/qna/React%20Context%EB%A5%BC%20%EC%9D%B4%EC%A4%91%EC%9C%BC%EB%A1%9C%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님! React에서 Context API를 사용할 때, 상태(state)와 관련된 함수(dispatch)를 분리해 사용하는 이유에 대해 궁금해 하시는 것 같습니다. Context API를 활용할 때, 성능 최적화를 위해 상태와 함수를 분리해주는 것이 일반적인 패턴입니다. 그 이유를 간단히 설명드리겠습니다: 상태와 함수를 분리하는 이유 최적화 : 동일한 Context에 {data, onCreate, onUpdate, onDelete} 를 전부 포함시키면, data 의 변경 사항이 발생할 때마다 Context가 재생성되고, 이로 인해 함수들도 불필요하게 재생성될 수 있습니다. 이는 불필요한 리렌더링을 초래하여 성능에 영향을 줄 수 있습니다. 리렌더링 최소화 : data 는 데이터 변경이 발생할 때마다 업데이트되므로 이와 관련된 부분만 리렌더링을 최소화하기 위해 DiaryStateContext를 사용합니다. 반면, onCreate , onUpdate , onDelete 는 함수이므로 DiaryDispatchContext를 별도로 사용하여 필요할 때만 전달하도록 할 수 있습니다. 이는 리렌더를 최소화하고 성능을 최적화하는 데 도움이 됩니다. 재사용성 향상 : 이와 같은 구조 분리로 인해 코드의 유지보수가 쉬워지고, 각 Context가 독립적으로 관리되어 외부로부터 독립성을 강화할 수 있습니다. 유사한 질문 이와 관련하여 기존에 논의된 유사한 질문들을 참고하시면 보다 깊이 있는 이해가 가능합니다: “data와 onCreate, onRemove, onEdit 을 같은 context에서 전달하면 안되는 이유” “context와 최적화 관련 질문” “context에 관해서 질문드립니다.” 이러한 방식으로 상태와 함수를 분리함으로써 리렌더를 최소화하여 React 애플리케이션의 성능을 개선할 수 있습니다. 추가적인 내용이나 다른 질문이 있으시면 언제든지 말씀해 주세요. 곧 지식공유자님이 답변을 드릴 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.