[React] 미니프로젝트 - 최적화하기

최적화를 위해 코드를 하나하나 보는 방법도있고 리액트 디벨로퍼 tools의 Components를 통해 화면으로 보는방법도 있다.

날짜를 바꿨는데 아래부분까지 모두 모두 랜더링이 되어 낭비되는 것을 확인 할 수 있다.

문제 : 홈 컴포넌트를 랜더링할때 ControlMenu가 랜더링되고 그 자식요소인 DiaryList까지 랜더링이 된다.

해결 : React.memo로 감싸주기 >> 리액트 메모복습 >> 전달 받는 프롭이 값변화가 없을 시 상태변화가 일어나지 않는다

---

내용을 수정하는데 emotion까지 랜더링 되는 모습


EmotionItem에 있는 프롭 중 onClick함수는 memo가 적용되지 않는다. useCallback으로 묶어놓은게 아니라서 기본적으로 컴포넌트 랜더링될때 다시 생성되서 react.memo의 강화된 컴포넌트에도 랜더링 시킨다.

그렇기때문에 onClick함수도 useCallback으로 재사용가능하게 해줘야한다.

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

DiaryEditor내에 handleClickEmote를 유즈콜백으로 묶어주고

export default React.memo(EmotionItem);

EmotionItem컴포넌트를 React.memo로 묶어주었다.

참고 :
- 한 입 크기로 잘라먹는 리액트