React 렌더링을 잡자 🙈🙉

joabyjoa·2020년 6월 21일
0
post-thumbnail

리액트에서 렌더링이 일어나는 경우

리액트에서 렌더링 된 컴포넌트가 다시 렌더링되는 경우는 다음과 같다.

  1. 컴포넌트의 state가 변할 때
  2. 컴포넌트의 props가 변할 때
  3. 자신이 속한 상위 컴포넌트가 다시 렌더링되는 경우

이와같은 특성 때문에 필요하지 않은 경우에도 컴포넌트가 다시 렌더링되어 성능을 떨어뜨릴 수도 있다. 이럴 땐 일단 useEffect의 의존성을 체크 해 보자.(사실 lint가 하라는 대로 하면 크게 문제가 생기지 않는 것 같다.🧐)

만약 이랬는데도 자꾸 렌더링이 된다면...?😩 memo, useCallback, useMemo가 이걸 해결해줄 것이다.😎

렌더링 최적화 하기

memo

props가 변할 때만 컴포넌트를 다시 렌더링된다.

) => {
  console.log("Right has rendered!", count);
  return <p>➡️오른쪽에 위치하는 컴포넌트 {count}</p>;
};

const MemoziedRight = memo(Right);

const Sample = () => {
  console.log("Sample has rendered!");
  const [left, setLeft] = useState(0);
  const [right, setRight] = useState(0);
  return (
    <div style={{ display: "flex" }}>
      <div>
        {/* 그냥 쓸 경우 left 뿐만 아니라 right가 변해도 컴포넌트가 다시 렌더링된다. */}
        <Left count={left} />
        <button onClick={() => setLeft(prev => prev + 1)}>
          왼쪽 컴포넌트 변경
        </button>
      </div>
      <div>
        {/* Memo를 사용하였을 경우 right가 변경될 때만 다시 렌더링된다. */}
        <MemoziedRight count={right} />
        <button onClick={() => setRight(prev => prev + 1)}>
          오른쪽 컴포넌트 변경
        </button>
      </div>
    </div>
  );
};

export default Sample;

위의 예시 코드를 실행해보면 Memo를 사용한 Right 컴포넌트는 오른쪽 버튼을 클릭할 때만 바뀐다. 왼쪽 버튼을 클릭해도 Right 컴포넌트는 다시 렌더링되지 않는다. 반면에 Left 컴포넌트는 왼쪽 버튼 뿐만 아니라 오른쪽 버튼을 클릭해도 다시 렌더링이 된다.

useCallback

렌더링 될 때마다 생성되는 함수를 저장한다.

❗️컴포넌트가 렌더링 될 때마다 함수가 새로 생성되기 때문에 props로 넘겨주는 함수는 모두 useCallback으로 감싸 주는 것이 좋다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

많은 계산이 필요한 경우 그 값을 재활용할 때 쓴다.

const expensiveJob = useMemo(() => computeExpensiveValue(a, b), [a, b]);

참고

profile
검은 콩 세 개가 세상을 구한다🐾

0개의 댓글