인프런 커뮤니티 질문&답변
작성한 질문수
context를 사용하니 Editor 컴포넌트 최적화가 풀리는 이유
해결된 질문
작성
·
55
0
안녕하세요. 강의 잘 듣고 있습니다.
context 를 사용하기 전 코드에서
export default memo(Editor);Editor 컴포넌트에도 memo 를 사용해서 TodoItem의 수정/삭제로 인해 계속 리렌더링되는 것을 막는 최적화를 했었는데요.
context를 사용하고 나니까 Editor 컴포넌트의 최적화가 풀리는 이유가 궁금합니다.
useCallback과 useMemo를 사용해서 함수를 App 컴포넌트가 마운트 될 때 한번만 생성하고 3개의 함수를 묶은 객체도 다시 생성되지 않도록 만들었는데,
Editor 컴포넌트는 컨텍스트에서 onCreate 함수만 받아서 사용하고 있는데, 왜 리렌더링이 발생하나요?
챗지피티에 질문을 했더니,
"props가 없는 상태에서 useContext만 쓰고 있으면 memo는 props 비교를 하지 못해서 무조건 리렌더링 발생한다" 라고 하는데
맞는 말인가요?
맞는 말이라면 설명 좀 부탁드립니다.ㅠㅠ
답변 3
0
안녕하세요 이정환입니다.
onCreate, onUpdate, onDelete 함수를 별도의 Context로 분리해 주었음에도 리렌더링이 발생한다는 말씀이실까요? 그렇다면 리액트 디벨로퍼 툴스 상의 오류일 가능성이 있는데요 정확한 원인 파악을 위해서는 조금 더 구체적인 상황 공유가 필요할 것 같습니다 😀
0
0
안녕하세요, 인프런 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의 사용 여부에 대한 논의가 이루어졌습니다.
- 이 게시물에서는
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.