React.memo 를 TodoItem 에 적용하는 부분에서 질문... - 인프런

const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => {
  const onChangeCheckbox = () => {
    onUpdate(id);
  };

  const onClickDeleteButton = () => {
    onDelete(id);
  };

  return (
    <div className="TodoItem">
      <input onChange={onChangeCheckbox} type="checkbox" checked={isDone} />
      <div className="content">{content}</div>
      <div className="date">{new Date(date).toLocaleDateString()}</div>
      <button onClick={onClickDeleteButton}>삭제</button>
    </div>
  );
};

export default memo(TodoItem, (prevProps, nextProps) => {
  // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단
  // T -> Props 바뀌지 않음 -> 리렌더링 X
  // F -> Props 바뀜 -> 리렌더링 O

  if (prevProps.id !== nextProps.id) return false;
  if (prevProps.isDone !== nextProps.isDone) return false;
  if (prevProps.content !== nextProps.content) return false;
  if (prevProps.date !== nextProps.date) return false;

  return true;
});

TodoItem 의 props 에 함수(객체 타입의 값)을 받고 있어서

export default memo(TodoItem);

이렇게만 적용할 경우 리렌더링 시, 함수를 새로운 객체로 인식해서
TodoItem 컴포넌트 입장에서는 props가 바뀌었다고 인식한다는 거 까지는 이해가 됐습니다.

근데 memo 의 두 번째 인수에서

if (prevProps.id !== nextProps.id) return false;   
if (prevProps.isDone !== nextProps.isDone) return false;   
if (prevProps.content !== nextProps.content) return false;   
if (prevProps.date !== nextProps.date) return false;

이렇게만 비교하면 결국 onUpdate, onDelete 는 비교를 하지 않은거같은데 왜 동작이 잘 되는지 모르겠습니다.
true 값을 반환해주면 함수는 변하지 않았다고 정해주는 걸까요?

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

질문 내용은 React.memo 함수와, 함수형 컴포넌트의 props 비교 부분에 관한 것입니다. 리액트는 기본적으로 함수나 객체를 새로운 참조로 인식하기 때문에 매번 새로운 객체로 생성된 경우, 변경된 것으로 간주하여 리렌더링을 트리거할 수 있습니다. 그러나 React.memo를 통해 특정 props 값이 변경되는지 여부를 제어할 수 있습니다.

memo의 두 번째 인수 기능

React.memo의 두 번째 인수로는, prevProps와 nextProps 사이의 커스터마이즈된 비교 로직을 제공합니다. 이 로직에서 true를 반환할 경우 ‘다른 부분이 없다’고 판단하여 리렌더링을 방지하며, false를 반환할 때는 ‘변화가 있다’고 판단하여 리렌더링이 이루어지게 됩니다.

현재 작성하신 코드에서 onUpdate와 onDelete 함수는 비교되지 않기 때문에, 의도적으로 이 함수들이 리렌더링 조건에 영향을 미치지 않게 설정하신 것입니다. 함수가 새로운 객체로 인식되는 경우가 빈번하지만, 해당 함수의 다형성이 유지되고 이전과 동일한 로직이어야 하기 때문에 이중 비교에서 제외할 수 있는 것입니다.

함수 객체가 변하지 않는 이유

리액트 컴포넌트에서 onUpdate와 onDelete 함수가 비록 매번 새로운 참조로 전달된다 해도, 어차피 동일한 함수의 로직을 갖고 있으므로, 이로 인해 추가적으로 비교할 필요는 없다는 판단입니다. props 변경이 실제 렌더링 변화와 직접적으로 관련되어 있는지는 함수 로직이 변경되지 않았음을 전제로 합니다.

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

React.memo 를 TodoItem 에 적용하는 부분에서 질문 있습니다.

memo의 두 번째 인수 기능

함수 객체가 변하지 않는 이유

관련 질문 참고