리액트 앱의 렌더링 낭비를 제거하여 최적화 진행

분석하기

개발자도구 / [Components] / Highlight updates when… 옵션 선택

분석하기 : Home 페이지

• 정렬 기준 변경할 때마다 DiaryItem 리렌더

분석하기 : New & Edit 페이지

두 페이지 모두 Editor 컴포넌트를 사용하기 때문에 함께 분석 가능

• 일기 작성시 EmotionItem 컴포넌트 모두 리렌더

DiaryItem 최적화

• **Context**에서 데이터를 받거나 Props로 함수나 배열 같은 참조형 값도 받지 않는다.
• **React.memo**를 이용해 **Props**를 기준으로 메모이제이션

import React from "react";
// react 라이브러리에서 기본으로 내보내진 React 객체를 불러온다.
(...)
export default React.memo(DiaryItem);
// DiaryItem 컴포넌트에서 기본으로 내보내는 값을 **React.memo로 메모제이션**

일기 아이템별 하이라이트 사라짐