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

최어진

작성한 질문수

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

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

Todo구현중 memo함수에 대해서

작성

todo리스트 구현중 TodoItem.jsx에서 memo에 대해 강의를 보며 공부중입니다.

이렇게 console.log로 찍었는데 체크박스를 한 개만 찍어도 3가지 모두 다 console로 찍히는데 제대로 적용된 것 맞나요? 하이라이트를 켜도 색상이 비슷해서 구분이 잘 가지않습니다.

로그는 이렇게 찍힙니다.

prev next = {"id":0,"isDone":false,"content":"React 공부하기","date":1764731042079}{"id":0,"isDone":true,"content":"React 공부하기","date":1764731042079}

TodoItem.jsx?t=1764729548020:40 prev next = {"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}{"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}

TodoItem.jsx?t=1764729548020:40 prev next = {"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}{"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}

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

function TodoItem({id, isDone, content, date, onUpdate, onDelete}) {

    const onChangeCheckbox = () => {
        onUpdate(id);
    }

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

    return ( 
        <div className="TodoItem">
            <input onChange={onChangeCheckbox} 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) => {

    console.log("prev next = " + JSON.stringify(prevProps) + JSON.stringify(nextProps))
    
    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 
});

javascript react node.js 카카오공채-개발

답변 2

이정환 Winterlood

지식공유자

안녕하세요 최어진님 이정환입니다.

체크박스를 클릭한 TodoItem에만 콘솔이 출력되어야 하는데 뭔가 문제가 있는 것 같습니다.

질문 가이드라인으로 안내해드리고 있는 것 처럼 정확한 문제의 원인을 파악하기 위해서는 전체 프로젝트 코드를 GitHub 혹은 구글 드라이브 링크로 전달해주시면 직접 살펴보겠습니다

인프런 AI 인턴

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

질문 내용을 읽어보니 React.memo 를 사용하셨을 때, 체크박스를 클릭하셨을 때의 console.log 결과로 모든 항목이 다시 로그에 찍히는 것을 관찰하셨습니다. 이는 아마도 해당 컴포넌트가 예상대로 동작하지 않는 이유로 보입니다.

`React.memo` 동작 방식

React.memo 는 함수형 컴포넌트를 메모이제이션하여 동일한 props 로 리렌더링을 방지하는 기능을 제공합니다. 이때 제공하신 커스터마이즈된 비교 함수는 true 를 반환하면 리렌더링을, false 를 반환하면 리렌더링을 막게 됩니다.

예상 문제

부모 컴포넌트 리렌더링: 체크박스를 누르면 상태가 변경되어 TodoItem 의 부모 컴포넌트가 리렌더링 될 수 있습니다.
onUpdate 함수의 참조 변화: React.memo 로 감싼 TodoItem 이 onUpdate 와 onDelete 함수의 참조가 유지되지 않는 경우 새로운 함수로 인식할 수 있습니다. 이는 매 리렌더링 시마다 새로운 참조를 전달하면 발생할 수 있습니다.

해결 방안

상위 컴포넌트에서 useCallback 사용: onUpdate 함수가 부모 컴포넌트에서 넘어오는 경우 useCallback 을 사용해 함수의 참조가 변경되지 않도록 해보세요.

const onUpdate = useCallback((id) => {
    // update logic
}, []);

Problem Detection: console.log 를 통해 onUpdate 랑 onDelete 의 참조 값이 매번 바뀌는지를 확인해보세요. 이를 통해 어떤 참조가 문제인지 파악할 수 있습니다.
Todos 배열 변경 방지: 상위 컴포넌트에서 Todos 배열을 업데이트할 때, 새로운 배열에 대한 참조를 통해 변화가 감지되도록 주의해야 합니다.

참고 자료

동일한 주제에 대해 더 잘 이해할 수 있는 유사한 질문을 참고하세요:

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

최어진