context를 사용하니 Editor 컴포넌트 최적화가 풀리는 이유

Question

안녕하세요. 강의 잘 듣고 있습니다. context 를 사용하기 전 코드에서   export default memo(Editor); Editor 컴포넌트에도 memo 를 사용해서 TodoItem 의 수정/삭제로 인해 계속 리렌더링되는 것을 막는 최적화를 했었는데요.   context를 사용하고 나니까 Editor 컴포넌트의 최적화가 풀리는 이유가 궁금합니다. useCallback 과 useMemo 를 사용해서 함수를 App 컴포넌트가 마운트 될 때 한번만 생성하고 3개의 함수를 묶은 객체도 다시 생성되지 않도록 만들었는데,   Editor 컴포넌트는 컨텍스트에서 onCreate 함수만 받아서 사용하고 있는데, 왜 리렌더링이 발생하나요? 챗지피티에 질문을 했더니, " props 가 없는 상태에서 useContext 만 쓰고 있으면 memo 는 props 비교를 하지 못해서 무조건 리렌더링 발생한다" 라고 하는데 맞는 말인가요? 맞는 말이라면 설명 좀 부탁드립니다.ㅠㅠ

이정환 Winterlood · Answer

안녕하세요 이정환입니다. onCreate, onUpdate, onDelete 함수를 별도의 Context로 분리해 주었음에도 리렌더링이 발생한다는 말씀이실까요? 그렇다면 리액트 디벨로퍼 툴스 상의 오류일 가능성이 있는데요 정확한 원인 파악을 위해서는 조금 더 구체적인 상황 공유가 필요할 것 같습니다 😀

junghyun · Answer

React Developer Tools의 오류로 인해 발생하는 상황인 것 같습니다. console.log로 확인해보니 렌더링 되지 않네요!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. junghyun님. Editor 컴포넌트에서 context 사용 후 최적화가 풀리는 현상에 대해 설명해 드리겠습니다. React.memo 는 컴포넌트의 props 변화 여부를 감지하여 최적화를 수행합니다. 하지만 useContext 를 사용할 경우, context 의 값이 변경되면 그 값을 사용하는 모든 컴포넌트는 리렌더링됩니다. 이 과정에서 React.memo 는 props 의 변경 여부를 감지하지 않고, context 의 값 변경을 감지하게 되어 React.memo 의 최적화가 작용하지 않게 됩니다. 따라서, Editor 컴포넌트가 onCreate 함수를 useContext 로 받아서 사용하고 있다면 TodoDispatchContext.Provider 의 value 가 변경될 때마다 Editor 컴포넌트가 리렌더링됩니다. 이는 context 값이 변경될 때 모든 소비자가 변화에 반응해야 하기 때문입니다. 제가 챗GPT의 설명에 조금 더 추가하자면, props 가 없는 상태라면 React.memo 는 props 의 변화만 감지합니다. useContext 는 context 의 변경 사항을 감지하게 되어, context 감지가 React.memo 보다 우선시 되기 때문에, memo 로 인한 최적화가 제한적일 수 있습니다. props 없이 useContext 만 사용하면 React.memo 는 props 비교를 하지 못하게 되며, context 값의 변경이 발생할 경우 리렌더링이 발생하는 점을 유의해야 합니다. 관련된 질문 및 논의를 다음 게시물에서 참고하실 수 있습니다: context, 최적화 관련 질문 이 게시물에서는 DispatchContext 에서의 최적화와 관련하여 useMemo 와 useCallback 의 사용 여부에 대한 논의가 이루어졌습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.