인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
React.memo 메서드관련 질문드립니다.
해결된 질문
작성
·
121
·
수정됨
0
10.3) 해당 강의에서 TodoItem 컴퍼넌트 리렌더링 실행 조건을 memo 메서드를 이용하여 커스터마이징할 때,
if (prevProps.isDone !== nextProps.isDone) return false;이 문구에서 prevProps.isDone 값은 기존값이니 이해가 되었는데 nextProps.isDone 값은 해당 TodoItem 함수 내에 onCangeCheckbox 함수가 선행으로 실행이 되어야 알 수 있는 값 아닌가요? 그 전에 실행이 안 되도록 memo 메서드로 TodoItem의 리렌더링을 막고 있는데 어떻게 isDone 값이 바꼈다고 판단해서 리렌더링이 되는건지 모르겠습니다.
답변 2
1
안녕하세요 이정환입니다.
우선 리액트의 memo는 컴포넌트가 리렌더링 되려고 할 때 실행되어 현재 이 컴포넌트를 리렌더링 해야 하는지 결정하는 역할을 합니다. 즉 TodoItem 컴포넌트가 부모로 부터 전달받는 Props가 변경될 때 이 컴포넌트의 리렌더링 여부를 결정하기 위해 이 함수가 실행된다는 것이죠
따라서 TodoItem 컴포넌트에서 체크박스를 클릭해 특정 아이템의 isDone 값을 변경하게 되면 이렇게 변경된 값으로 인해 TodoItem 컴포넌트를 리렌더링 해야 하는지 판단하기 위해 이 memo 함수가 실행이 되고 이때 변경된 isDone 값과 변경되기 전의 isDone의 값을 비교해 리렌더링 여부를 결정하게 된다는 뜻 입니다.
0
안녕하세요, 인프런 AI 인턴입니다.
질문은 React.memo의 기능과 prop 업데이트에도 불구하고 올바르게 리렌더링이 되는지에 관한 내용인 것 같습니다. React.memo는 컴포넌트의 연산 비용이 높거나, 자주 리렌더링 될 필요가 없는 경우 최적화하는 방법 중 하나로 사용합니다. 질문하신 부분을 설명드리자면, React.memo는 컴포넌트가 수신하는 props를 이전과 비교하여 동일하면 리렌더링을 방지하는 역할을 합니다.
질문에서 말씀하신 prevProps.isDone !== nextProps.isDone 부분은 isDone이라는 prop의 이전 상태와 새로운 상태를 비교하는 조건입니다. 이 조건이 false를 반환할 때, 즉 isDone의 값이 변경되지 않았을 때는 리렌더링을 막습니다. 반대로 이 조건이 true라면(값이 변경되었다면) 리렌더링을 허용합니다. 여기서 중요한 점은 리액트는 원칙적으로 Prop의 변경 사항을 감지하면 해당 컴포넌트를 다시 그리도록 설계되어 있습니다. onChangeCheckbox 이벤트가 실행되면, 상태 변화가 발생하고, 이때 새로운 props가 이전 것과 비교되어 리렌더링 조건을 충족하게 됩니다.
관련 질문과 더불어 몇 가지 유익한 답변을 추천드립니다:
1. “React.memo 메서드와 리렌더링 최적화”
2. “props 변화와 React.memo의 조건”
이 링크들을 통해 관련 사례와 추가적인 답변을 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다!