memoizedDispatch 말고 MemoizedProvider

Question

const MemoizedProvider = React.memo(TodosStateContext.Provider); TodosStateContent가 컴포넌트이니까 memoizedDispatch의 useMemo말고 아예 React.memo를 사용해서 최적화 해도 되나요? 이렇게 하면 안에 있는 객체 {onCreate, onUpdate, onDelete}도 재생성 안되지 않을까요..?

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 우선 기존 강의 코드에서 벗어나 2145007님만의 새로운 접근과 응용을 시도해보시는 점 매우 대단하다고 말씀드리고 싶습니다 👍 그러나 아쉽게도 React.memo로는 동일한 기능을 보장할 수 없습니다 ㅠㅠ 그 이유는 간단한데요 React.memo는 Props가 변경되지 않는 상황에서만 리렌더링을 방지하기 때문입니다. 그러나 우리 강의에서 TodoDispatchContext.Provider에게 전달되는 3개의 함수(onCreate, onUpdate, onDelete)를 묶고 있는 객체는 일반적인 객체로써 App 컴포넌트가 리렌더링 될 때 마다 새롭게 생성될겁니다. 그러면 결국 새롭게 생성된 객체를 Props로 전달받는 TodoDispatchContext.Provider 컴포넌트는 React.memo가 적용되었다고 하더라도 리렌더링이 발생하게 됩니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 2145007님. 질문해주신 사항에 대해 설명드리겠습니다. React에서는 React.memo() 를 사용하여 컴포넌트를 최적화할 수 있지만, 이는 주로 그 컴포넌트의 props가 변경되지 않는 경우에 리렌더링을 방지하는 역할을 합니다. TodosStateContext.Provider 와 같은 Provider 컴포넌트는 하위에 렌더링된 컴포넌트들에 특정 값을 제공할 때 사용됩니다. Provider는 일반적인 컴포넌트와는 달리 훅스 내부에서 상태나 함수를 관리하고 있는 것이 아니기 때문에 React.memo() 로 감싸더라도 컨텍스트에 제공하는 값들이 변경되면 하위 컴포넌트에는 변화가 있습니다. 따라서 컨텍스트를 통한 값 전달 방식은 일반 컴포넌트의 리렌더링 최적화 방식과는 좀 차이가 있습니다. 질문에서 언급하신 것처럼 useMemo 를 사용하면 {onCreate, onUpdate, onDelete} 객체가 재생성되는 것을 방지할 수 있습니다. useMemo 는 의존성 배열이 변경되지 않는 한 이전에 계산된 값을 기억하고, 불필요한 객체 재생성을 피하도록 돕습니다. 결론적으로, React.memo() 는 Provider 내의 값을 캐싱하는 데 직접적으로 도움을 주지 않으며, useMemo 와 같이 의존성 배열을 관리하여 최적화하는 것이 적절합니다. 관련된 다른 질문과 답변이 있으니 아래 링크도 참고해 보시면 이해에 도움이 될 것입니다: data와 onCreate, onRemove, onEdit 을 같은 context에서 전달하면 안되는 이유 Context 질문드립니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.