인프런 커뮤니티 질문&답변
작성한 질문수
일기 관리 기능 구현하기2 강의 질문있습니다.
해결된 질문
작성
·
154
0
현재 일기 관리 기능 구현하기2 부분의 강의를 보고 있는데 강의에서
const DiaryStateContext = createContext();
const DiaryDispatchContext = createContext();이렇게 createContext를 두번 작성이 되었고 또 DiaryStateContext는 value로 data를 DiaryDispatchContext는 value로 onCreate, onUpdate, onDelete 이렇게 각각 보내는데 왜 이렇게 두번작성을 하는 것인지 그리고 그냥 DiaryStateContext 이 부분에 value로 data와 onCreate, onUpdate, onDelete 이걸 같이 보내면 안되는건가요?
답변 2
0
안녕하세요 이정환입니다.
이 부분은 최적화를 위한 것으로 우리 강의의 11.3) Context 분리하기 에서 자세히 다루고 있습니다.
위 강의에서 사용된 예제와 거의 비슷한 방식이니 한번 다시 돌아보시는걸 추천드려요!
추가로 아래의 아티클을 참고하시는 것도 추천드립니다.
0
안녕하세요, 인프런 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 애플리케이션의 성능을 개선할 수 있습니다. 추가적인 내용이나 다른 질문이 있으시면 언제든지 말씀해 주세요. 곧 지식공유자님이 답변을 드릴 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변주셔서 감사드립니다 바로 확인하겠습니다 ^^