인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 기존 강의 코드에서 벗어나 2145007님만의 새로운 접근과 응용을 시도해보시는 점 매우 대단하다고 말씀드리고 싶습니다 👍

그러나 아쉽게도 React.memo로는 동일한 기능을 보장할 수 없습니다 ㅠㅠ

그 이유는 간단한데요 React.memo는 Props가 변경되지 않는 상황에서만 리렌더링을 방지하기 때문입니다. 그러나 우리 강의에서 TodoDispatchContext.Provider에게 전달되는 3개의 함수(onCreate, onUpdate, onDelete)를 묶고 있는 객체는 일반적인 객체로써 App 컴포넌트가 리렌더링 될 때 마다 새롭게 생성될겁니다.

그러면 결국 새롭게 생성된 객체를 Props로 전달받는 TodoDispatchContext.Provider 컴포넌트는 React.memo가 적용되었다고 하더라도 리렌더링이 발생하게 됩니다.

안녕하세요, 인프런 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 질문드립니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.