해결된 질문
작성
·
49
·
수정됨
1
첫번째 context Provider 에 {data}
두번째 context Provider 에 {onCreate,onUpdate,onDelete}
이렇게 2개를 사용해야 하는건가요? 1개로 value 에
{data, onCreate,onUpdate, onDelete} 이렇게는 안되는건가요?
안되는 거라면 이유가 있을 런지요?
복잡한 상태 관리가 필요한 경우에 종류별로 많이 사용된다면 코드가 복잡해질거 같은데요 ㅠ
그리고 실무에서 상태관리를 위해서 Redux를 많이 사용하는 거 같더라구요? 현재 react 강좌에는 Redux 내용은 없는거 같아요 ㅠㅠ 추가 보충설명 공유주시면 감사할거 같아요 ~~
답변 2
0
안녕하세요 이정환입니다.
AI 인턴의 답변대로 이렇게 Context를 두개로 분리하는 이유는 성능 최적화를 위함입니다. 이에 대해서는 우리 강의의 11.3) Context 분리하기 챕터에서 자세히 다루고 있으니 해당 내용을 참고하시면 좋을 것 같습니다!
0
안녕하세요, 인프런 AI 인턴입니다. babi9005님!
React Context 사용 방식을 이해하시는 과정에서 헷갈리시는 부분이 있는 것 같습니다. Context API를 사용할 때, 상태(state)와 관련된 함수(dispatch)를 별도의 Context로 분리하는 것은 성능 최적화의 일환으로 많이 이루어지고 있습니다.
StateContext와 DispatchContext를 나누는 이유는 데이터(data
)와 함수(onCreate
, onUpdate
, onDelete
) 간의 리렌더링 비용을 분산하기 위함입니다.
value
로 {data, onCreate, onUpdate, onDelete}
를 주게 되면 상태가 변화할 때마다, 함수들도 불필요하게 재생성될 수 있기 때문에 performace가 떨어질 수 있습니다.최적화를 위한 방법:
data
는 대개 변동이 잦은 데이터 상태이기 때문에, StateContext에 할당합니다.onCreate
, onUpdate
, onDelete
와 같은 함수들은 상태를 변경하는 역할을 하므로, DispatchContext에 분리하여 할당하는 것이 바람직합니다.data
가 변경될 때마다 DispatchContext에 있는 함수 고유의 여부에 상관 없이 한 번만 리렌더링하게 됩니다.관련 내용을 보다 자세히 알고 싶으신 경우, 아래 링크된 게시물들을 참조하시면 됩니다:
각 링크에서는 Context를 나누는 이유와 사용법에 대해 잘 설명되어 있으니 참고하시길 바랍니다.
이와 같은 방식을 통해 불필요한 리렌더를 최소화할 수 있으며, 리액트 애플리케이션의 성능을 향상시킬 수 있습니다. 추가적인 내용이나 다른 도움이 필요하시다면, 언제든지 질문해 주시길 바랍니다. 지식공유자님이 곧 답변을 드릴 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다. 덕분에 강좌 재미있게 잘듣고 있습니다.~~
추가 문의사항 인데요 , 이 강좌에서는 redux 상태관리 없는거 같더구요 . 혹시 추가 적으로 강좌나 추가 업데이트 계획이 있으신지 문의드립니다.