[React] 최적화

최적화인지 아닌지 알아보는 방법

1. 직접 코드를 보면서 낭비되는 부분을 확인하기(정적 분석)
2. 🌟react developers를 사용해서 낭비되는 부분을 확인하기(동적 분석)

문제 1. 날짜 변경시(헤더에!)

❗ 날짜를 변경하면 밑에 있는 필터 기능까지 모두 랜더가 된다. ❗

< 구체적인 문제점 알아보기 >

이렇게 문제가 뭔지 시각적으로 알았다면 코드를 보면서 왜 필터 부분까지 랜더가 되는지를 살펴본다.
살펴봤더니 헤더 부분에 버튼을 클릭하면 -> 홈 컴포가 랜더가 되면서 결국 홈 컴포의 자식 요소인 DiaryList도 랜더가 된다. -> DiaryList 안에는 다시 ControlMenu 컴포까지 있으므로 ControlMenu도 같이 랜더가 된다.

💡 해결책 💡

React.memo를 사용을 해준다. React.memo의 경우는 컴포넌트의 프롭의 값이 변경되지 않으면 랜더해주지 않는 기능을 하였다.

const ControlMenu = React.memo(({ value, onChange, optionList }) => {
  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 컴포의 자식이다. 여기서 필터를 적용하게 된다면 DiaryList의 setSortType, setFilter가 랜더가 되고, 그렇게 된다면 자연스럽게 자식 컴포넌트도 리랜더가 되는 것이다.

💡 해결책 💡

DiaryItem 전체에 React.memo를 붙혀주면 된다. 여기서 컴포넌트 전체에 씌우기는 귀찮으니까 export default 부분에 붙히면 된다.

export default React.memo(DiaryItem);

문제 3. 수정하기 시

❗ 수정하여 텍스트를 수정할 때 감정 이미지들도 같이 계속 리랜더가 되고 있는 것을 확인할 수 있다. ❗

< 구체적인 문제점 알아보기 >

오늘의 일기를 수정하여 textarea 부분에 계속 랜더를 한다는 것은 결국 useContent가 계속 랜더가 일어나고 있다는 것이다. 즉, useContent가 있는 DiaryItem이 계속 랜더가 일어나고 자연스럽게 EmotionItem 컴포도 랜더가 되는 것이다.

💡 해결책 💡

• 당연히 React.memo 사용 js export default React.memo(EmotionItem); 그런데도 최적화가 안됨. -> 왜? onClick이라는 함수가 사용이 된다면 값이 변경되어 랜더가 필요하기 때문에!
  

• useCallback 사용 지금 보면은 EmotionItem 컴포넌트의 onClick 함수는 handleClickRemote 함수에 해당한다. 따라서 handleClickRemote 함수에 useCallback을 사용하여 Memoization 을 해주면 된다.

  // DiaryEdit.js
  const handleClickRemote = useCallback((emotion) => {
    setEmotion(emotion);
  }, []);