setstate 함수를 props로 전달했을 때 자식 컴포넌트의 리렌더링을 막을 수 있다고 이해하는 게 맞을까요?

섹션6 '프로젝트 최적화' 강의의 14:30부터 끝 부분까지의 내용 관련 궁금한 점이 있어 질문 드립니다!

강의를 들으면서, setstate 함수는 자동으로 useCallback 처리가 되어 반환되는 함수라 생각하면 되고, 따라서 setstate 함수를 props로 전달하면 성능 최적화를 할 수 있다고 이해했는데요,

그래서 DiaryEditor 컴포넌트가 자식 컴포넌트인 EmotionItem 에게 onClick={handleClickEmote} 를 props로 전달할 때 onClick={(e) => setEmotion(e)} 와 같이 setEmotion이라는 상태변화 함수를 전달해주면 useCallback을 사용하지 않고도 최적화를 할 수 있을 거라고 생각했습니다!

그러나 확인해보니 이 코드로는 최적화가 되지 않는데, 이유가 무엇인지 이해가 잘 되지 않습니다 ㅠㅠ

(EmotionItem에 React.memo로 묶어주었습니다!)

혹시 제가 잘못 이해한 부분이 있는지 여쭤봐도 괜찮을까요?

아래는 DiaryEditor.js 코드입니다!

import { useState, useRef, useContext, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { DiaryDispatchContext } from './../App';

import EmotionItem from './EmotionItem';
import MyHeader from './MyHeader';
import MyButton from './MyButton';

import { getStringDate } from '../util/data';
import { emotionList } from '../util/emotion';

const DiaryEditor = ({ isEdit, originData }) => {
  const contentRef = useRef();
  const [content, setContent] = useState('');
  const [emotion, setEmotion] = useState(3);
  const [date, setDate] = useState(getStringDate(new Date()));

  const navigate = useNavigate();
  const { onCreate, onEdit, onRemove } = useContext(DiaryDispatchContext);

  const handleClickEmote = useCallback((emotion) => {
    setEmotion(emotion);
  }, []);

  const handleSubmit = () => {
    if (content.length < 1) {
      contentRef.current.focus();
      return;
    }

    if (
      window.confirm(
        isEdit ? '일기를 수정하시겠습니까?' : '새로운 일기를 작성하시겠습니까?'
      )
    ) {
      if (!isEdit) {
        onCreate(date, content, emotion);
      } else {
        onEdit(originData.id, date, content, emotion);
      }
    }

    navigate('/', { replace: true });
  };

  const handleRemove = () => {
    if (window.confirm('정말 삭제하시겠습니까?')) {
      onRemove(originData.id);
      navigate('/', { replace: true });
    }
  };

  useEffect(() => {
    if (isEdit) {
      setDate(getStringDate(new Date(parseInt(originData.date))));
      setEmotion(originData.emotion);
      setContent(originData.content);
    }
  }, [isEdit, originData]);

  return (
    <div className='DiaryEditor'>
      <MyHeader
        headerText={isEdit ? '일기 수정하기' : '새 일기 쓰기'}
        leftChild={
          <MyButton onClick={() => navigate(-1)} text={'< 뒤로가기'} />
        }
        rightChild={
          isEdit && (
            <MyButton
              onClick={handleRemove}
              text={'삭제하기'}
              type={'negative'}
            />
          )
        }
      />
      <div>
        <section>
          <h4>오늘은 언제인가요?</h4>
          <div className='input_box'>
            <input
              className='input_date'
              value={date}
              onChange={(e) => setDate(e.target.value)}
              type='date'
            />
          </div>
        </section>
        <section>
          <h4>오늘의 감정</h4>
          <div className='input_box emotion_list_wrapper'>
            {emotionList.map((it) => (
              <EmotionItem
                onClick={handleClickEmote}
                isSelected={it.emotion_id === emotion}
                key={it.emotion_id}
                {...it}
              />
            ))}
          </div>
        </section>
        <section>
          <h4>오늘의 일기</h4>
          <div className='input_box text_wrapper'>
            <textarea
              ref={contentRef}
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder='오늘은 어땠나요?'
            ></textarea>
          </div>
        </section>
        <section>
          <div className='control_box'>
            <MyButton text={'취소하기'} onClick={() => navigate(-1)} />
            <MyButton
              text={'작성완료'}
              type={'positive'}
              onClick={handleSubmit}
            />
          </div>
        </section>
      </div>
    </div>
  );
};

export default DiaryEditor;