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

import React from "react";
import { useNavigate } from "react-router-dom";
import MyButton from "./MyButton";

const DiaryItem = ({ id, emotion, content, date }) => {
  const navigate = useNavigate();
  const goDetail = () => {
    navigate(`/diary/${id}`);
  };
  const goEdit = () => {
    navigate(`/edit/${id}`);
  };
  const strDate = new Date(parseInt(date)).toLocaleDateString();
  return (
    <div className="DiaryItem">
      <div
        onClick={goDetail}
        className={[
          "emotion_img_wrapper",
          `emotion_img_wrapper_${emotion}`,
        ].join(" ")}
      >
        <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} />
      </div>
      <div className="info_wrapper" onClick={goDetail}>
        <div className="diary_date">{strDate}</div>
        <div className="diary_content_preview">{content.slice(0, 25)}</div>
      </div>
      <div className="btn_wrapper">
        <MyButton text={"수정하기"} onClick={goEdit} />
      </div>
    </div>
  );
};
export default React.memo(DiaryItem); // 왜 렌더링 계속 되지?ㅡㅡㅡㅡㅡ

안녕하세요 강사님!

최적화 하는 과정에서 DiaryItem 에 React.memo를 적용시켰는데도 렌더링이 계속됩니다ㅜ

혹시 useNavigate 부분 코드때문에 그럴까요?

구글링해보니까
'원인은 react-router가 V6로 업그레이드 되면서 URL이 변경 될 경우 useNavigate함수를 계속 재생성하도록 변경 되었다는것을 알게 되었습니다.'
이런 글을 읽어서요,, 답변부탁드립니다!

강의 잘 듣고 있습니다. 좋은 강의 감사합니다!