미라클 메모리

목차

컴포넌트 구조

이모지 렌더링 멈춰!

import React from "react";

const EmotionItem = ({
  emotion_id,
  emotion_img,
  emotion_descript,
  onClick,
  isSelected,
}) => {
  return (
    <div
      onClick={() => onClick(emotion_id)}
      className={[
        "EmotionItem",
        isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`,
      ].join(" ")}
    >
      <img src={emotion_img} />
      <span>{emotion_descript}</span>
    </div>
  );
};

export default React.memo(EmotionItem);

Editor 페이지에서 텍스트를 입력할 때마다 리-렌더링이 진행이 된다. 이를 방지하기 위하여 React.memo를 통해서 감싸주었다. 하지만 여전히 문제가 발생한다. 왜일까? 그 이유는 전달받은 props 중에서 onClicke 이벤트가 존재하기 때문이다.

useCallback을 통해서 최적화 진행하기

<MyButton
	text={"작성완료"}
	type={"positive"}
	onClick={handleSubmit}
	>