22.06.22 회고(React.memo, React Profiling)

Facts(사실/ 객관)

1. 회사에서 남아 야근을 좀 하다가 운동 다녀왔다. 평소 같았으면 씻고 보상심리로 자기 전까지 쉬었을 텐데 오늘은 배운 것을 조금 더 검색하고 이렇게 회고도 남긴다.  

---

Feelings(느낌,주관)

• 매일 반복되는 일상 속 실력은 제자리 걸음인데 시간만 지나가는 느낌이 들었었다. 더 성장하고 싶은데 어디서 부터 시작해야 할 지 감이 오지 않았다. 근데 이제부터는 하루를 정리하고 뒤돌아보며 배운 것을 정리하는 것부터 하고자 한다. 그렇게 하나 둘 쌓이면 가시적으로라도 잘하고 있다는 느낌을 줄 수 있지 않을까? 

---

Findings(배운점)

1. React.memo

: React에서 제공하는 HOC (고차 컴포넌트)로 렌더링 결과를 memoizing해서 props의 값이 변경되지 않으면 이전의 렌더링 결과를 그대로 사용해 불필요한 리렌더링을 막는다. 

 

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);

여기서 props로 받은 tiltle 이나 releaseDate이 변경되지 않으면 MemoizedMovie는 메모이징된 이전의 내용을 사용한다. 

// 첫 렌더이다. React는 MemoizedMovie 함수를 호출한다.
<MemoizedMovie
  movieTitle="Heat"
  releaseDate="December 15, 1995"
/>

// 다시 렌더링 할 때 React는 MemoizedMovie 함수를 호출하지 않는다.
// 리렌더링을 막는다.
<MemoizedMovie
  movieTitle="Heat"
  releaseDate="December 15, 1995"
/>

 

1-2 언제 사용해야할까? 

부모 컴포넌트로 부터 전달받는 props가 자주 변경된다는 예상이 될 때 사용한다. 아래 예시를 보자.

function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <Movie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

위 예시에서 views는 서버에서 실시간으로 데이터를 받는 정보이다.  props가 변경되면 리렌더링이 되기 때문에 views로 인해 <Movie>컴포넌트 또한 불필요하게 리렌더링이 된다. 이때 Movie를 메모이징 시킬 수 있다. 

function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <MemoizedMovie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

이 경우 title과 releaseDate가 같다면 MemoizedMovie는 리렌더링 하지 않으므로 MovieViewRealtime의 성능을 향상시킬 수 있다. 

 

참고 자료

TOAST UI 

 

2. React Profiling을 통해 성능 측정

성능 최적화를 위해 무분별한 React.memo, useMemo, useCallback 사용은 오히려 성능을 저해할 수 있다고 한다.

이유는 메모이제이션을 위한 별도의 메모리가 필요하기 때문이다. 그래서 React Profiling을 통해 성능적 이점이 있다는 확신이 드는 경우에만 사용하도록 하자. 

 

관련자료

 

3. useSelector도 성능 최적화를 할 수가 있다고 한다! 세상에

 

참고자료1

참고자료2

 

4. Portals ? 요건 뭐지 ? 

 

참고자료

---

Affirmation(자기 선언, 앞으로 할 것)

1. 마지막까지 최선을 다하자.