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 
});

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