Editor Component의 최적화 불가능 이슈

작성자 없음

0

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

AI 인턴의 답변대로 ContextProvider가 제공하는 value의 값이 변경된다면 memo를 적용한 컴포넌트이더라도 리렌더링이 발생할 수 있습니다.

정확한 문제의 원인을 파악하려면 전체 프로젝트 코드가 필요한데요 깃허브나 구글드라이브 링크 형태로 올려주시면 더 자세히 분석해 원인과 해결 방안을 공유해드리겠습니다.

0

안녕하세요, 인프런 AI 인턴입니다. ikv님

React.memo는 props의 변경이 없을 때 부모 컴포넌트의 리렌더링을 방지하는 기능입니다. 다만 useContext를 사용하는 컴포넌트는 해당 Context의 value가 변경되면 memo 적용 여부와 관계없이 리렌더링될 수 있습니다.

따라서 Editor가 다음과 같이 TodoDispatchContext를 사용하고 있다면,

const { onCreate } = useContext(TodoDispatchContext);

TodoDispatchContext.Provider에 전달하는 value 객체가 Todo 상태 변경 때마다 새로 생성되는지 확인해 보셔야 합니다.

// 매 렌더링마다 새로운 객체가 생성됨
<TodoDispatchContext.Provider
  value={{ onCreate, onUpdate, onDelete }}
>

이 경우 체크박스 클릭으로 부모 컴포넌트가 리렌더링될 때 Context의 value 객체도 새로 만들어지므로 Editor 역시 리렌더링됩니다. Context의 객체 값을 메모이제이션하려면 다음과 같이 작성해야 합니다.

const memoizedDispatch = useMemo(
  () => ({ onCreate, onUpdate, onDelete }),
  [onCreate, onUpdate, onDelete]
);

<TodoDispatchContext.Provider value={memoizedDispatch}>
  ...
</TodoDispatchContext.Provider>

또한 onCreate, onUpdate, onDelete 함수 자체도 useCallback으로 참조가 유지되어야 합니다.

다만 강의의 Context 분리 예제처럼 TodoDispatchContext의 value가 이미 useMemo로 메모이제이션되어 있고, Editor가 별도의 변경되는 props를 받지 않는다면 체크박스 클릭으로 인해 Editor가 리렌더링되지 않는 것이 정상입니다. 이 경우에는 다음 사항도 함께 확인해 보세요.

• Editor가 실제로 TodoDispatchContext만 구독하고 있는지
  
• TodoStateContext까지 함께 구독하고 있지는 않은지
  
• Provider의 value 객체가 매번 새로 생성되고 있지는 않은지
  
• 개발 모드의 StrictMode로 인해 렌더링이 추가로 표시되는 것은 아닌지
  

관련하여 React.memo와 useCallback의 동작을 설명한 기존 답변을 참고해 주세요.

Editor 컴포넌트 리렌더링

React.memo는 props의 참조가 변경되지 않았을 때 부모 컴포넌트의 리렌더링을 막습니다. 따라서 Editor의 onCreate prop이 useCallback으로 메모이제이션되어 있다면 불필요한 리렌더링을 줄일 수 있습니다. 반대로 Context의 value가 변경되면 Context를 구독하는 컴포넌트는 memo와 무관하게 리렌더링될 수 있다는 점을 함께 확인할 수 있습니다.

Context 분리하기 중에서 memoizedDispatch에 useMemo를 사용하는 이유가 궁금합니다.

useMemo는 함수 자체가 아니라 여러 함수를 묶은 객체 값을 메모이제이션합니다. Provider에 전달되는 객체의 참조가 변경되지 않도록 하여, 해당 Context를 구독하는 컴포넌트들의 불필요한 리렌더링을 방지하는 것이 핵심입니다.

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