TodoItem 리렌더링 질문..

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

10.3) React.memo와 컴포넌트 렌더링 최적화

작성

133

import "./TodoItem.css";
import { memo } from "react";

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

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

  return (
    <div className="TodoItem">
      <input
        onChange={onChangeCheckbox} //button이 아닌 input태그이기 때문에 onChange를 사용
        readOnly
        checked={isDone}
        type="checkbox"
      />
      <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; // 네 개의 값이 바뀌지 않으면
});

코드를 따라 치면서 실습을 했는데 위처럼 바꿔도 모든 list가 리렌더링된다고 하이라이트가 뜹니다. 뭐가 문제인지 모르겠습니다ㅜㅜ

javascript react node.js

답변 3

marcel1315

저도 이랬는데, 저는 브라우저를 refresh하니 적용되었습니다.

이정환 Winterlood

지식공유자

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

현재 이 파일의 코드만 보고서는 정확한 문제원인 파악이 어렵습니다 ㅠㅠ 질문 가이드라인을 확인하시어 프로젝트의 전체 코드를 깃허브 or 구글드라이브링크로 보내주시면 살펴볼 수 있습니다.

인프런 AI 인턴

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

질문해주신 내용에 기반하여, React.memo를 TodoItem 컴포넌트에 적용했음에도 불구하고 모든 리스트 아이템이 리렌더링되는 문제를 겪고 계신 것 같습니다. React.memo는 받는 props의 변경 여부를 기준으로 컴포넌트의 리렌더링을 최적화하려는 목적을 가집니다. 주어진 코드의 조건에 따라, id, isDone, content, date 값이 변경되지 않은 경우에만 리렌더링을 막아야 합니다.

현재 코드에서는 prevProps와 nextProps의 특정 항목이 다를 경우마다 false를 반환하여, 리렌더링이 발생하게 되어 있습니다. 문제의 원인이 다음과 같은 이유일 수 있습니다:

데이터 참조 문제: props로 받은 데이터가 깊은 복사를 통해 관리되지 않고 새로운 객체로 변환되거나, 체크박스 등의 상태가 변하면서 내부적으로 리렌더링이 발생하게 됩니다. props의 참조가 새로 발생할 경우, 일반적으로 memo는 작동하지 않을 수 있습니다.
상위 컴포넌트 렌더링: 만약 상위 컴포넌트에서 이 TodoItem을 포함하는 부모 컴포넌트가 업데이트 되면, TodoItem이 다시 렌더링될 수 있습니다.

우선 확인해야 할 부분은 TodoItem이 받을 수 있는 모든 props가 동일성을 유지하면서 넘겨지는지입니다. 예를 들어, 상위 컴포넌트에서 todos 배열 자체가 매번 새로 생성되지 않고 상태가 유지되는 것이 중요합니다.

추가 설명과 유익한 사례를 위한 참고 게시물 링크를 공유드립니다:

링크를 통해 유사한 문제의 사례와 추가적인 설명을 참고해 보세요.

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

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

TodoItem 리렌더링 질문..