프로젝트 최적화

Optimization

최적화 확인 방법 2가지)
- 정적 분석 : 코드의 상태를 보고 판단
- 동적 분석 : 프로젝트를 켜서 도구의 힘을 빌려 낭비되는 부분 찾기 ((React Developer Tools)개발자 도구의 Components 탭 - General - Highlight updates when components render 체크 활용)

1. Home 최적화
1) ControlMenu 컴포넌트 최적화
Home 화면의 헤더에서 화살표를 통해 날짜 변경시 필터와 버튼 부분이 렌더링 된다. Home 컴포넌트가 렌더링 되면 자식인 DiaryList 도 렌더링 되고 또 그 자식 요소인 ControlMenu 컴포넌트도 렌더링 된다.

- DiaryList.js

import React, { useEffect, useState } from "react";
...
// select box 컴포넌트
// React.memo 를 통해 만들어진 고차 컴포넌트는 전달받는 props 이 값이 바뀌지 않으면 렌더링이 일어나지 않게 한다.
// onChange 로 전달되는 함수는 state 를 변환시키는 함수(setSortType, setFilter)이다. 기본적으로 useCallback 처리가 되어서 나온 함수라 생각하면 된다.
const ControlMenu = React.memo(({ value, onChange, optionList }) => {
    /*
    useEffect(() => { // 렌더링 확인
        console.log('Control Menu');
    });
    */
    return (
        <select
            className='ControlMenu'
            value={value}
            onChange={(e) => onChange(e.target.value)}
        >
            {optionList.map((it, idx) => <option key={idx} value={it.value}>{it.name}</option>)}
        </select>
    );
});
...

2) DiaryItem 컴포넌트 최적화
필터를 바꿀 때 DiaryItem 컴포넌트에 불필요한 리렌더링이 계속 일어난다. DiaryList 컴포넌트가 렌더링 되면 자식 컴포넌트인 DiaryItem 컴포넌트에도 렌더링이 일어난다.

- DiaryItem.js

import React from "react";
...
export default React.memo(DiaryItem);

일기 아이템 자체에 대한 렌더링이 일어나지 않는다.

2. New, Edit 최적화
1) EmotionItem 컴포넌트 최적화
오늘의 일기 데이터 수정시, 오늘의 감정 부분의 감정 아이템들에 렌더링이 일어난다. DiaryEditor 컴포넌트의 content state 가 계속 변하니, 자식 컴포넌트인 EmotionItem 컴포넌트도 렌더링이 일어난다.

- EmotionItem.js

import React from "react";

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

export default React.memo(EmotionItem);

2) handleClickEmote 함수 최적화
EmotionItem 컴포넌트에서 props 로 전달받는 onClick 함수에도 최적화를 적용한다. state 변화함수가 아니기 때문에 useCallback 함수를 적용한다.

- DiaryEditor.js

...
    // 감정 클릭시 실행되어 props 로 전달하는 함수
    // 가장 최신의 state 를 참조할 필요 없음. 따라서 함수형 update 적용 안함.
    const handleClickEmote = useCallback((emotion) => {
        setEmotion(emotion);
    }, []);
...

참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런