React 메모이제이션 실험

목차

📍 불필요한 리랜더링 방지에 미친 인간

먼저 React의 원리에 대해서 이해가 필요할 수 있기 때문에 간단하게 설명하자면,

React는 Virtual Dom과 Real Dom을 비교하여, 상태가 변한 부분만을 캐치하여, Real Dom에 Fetch를 합니다.

이 상태라는 단어에 대해서 집중해 보겠습니다.

React가 상태가 변한 부분만을 아주 잘 캐치했다면, 저는 이런 고민을 할 필요가 없었을 것 같습니다.

React에서는 UI 요소의 제일 작은 조각이라는 의미로 Component를 사용합니다.

UI안에는 또 다른 UI 조각이 있고, 그 UI 조각 안에는 또 다른 UI 조각이 있습니다.

이 UI 조각을 감싸고 있는 녀석을 부모 컴포넌트라고 부르고, 부모 컴포넌트 안에 있는 UI 조각을 자식 컴포넌트라고 부릅니다.

 

<부모컴포넌트>
  <자식컴포넌트 />
</부모컴포넌트>

React에 대한 설명은 이제 끝났고 제가 이걸 설명한 이유는

자식 컴포넌트의 불필요한 리랜더링을 방지하고 싶기 때문입니다.

즉 성능입니다.

React에서 자식 컴포넌트가 리랜더링이 일어나는 이유는 다음과 같습니다.

1. 부모 컴포넌트의 상태가 변하면, 자식 컴포넌트도 리렌더링이 됩니다.
2. 부모로부터 전달받는 Props의 상태나 state의 상태가 변해도, 리렌더링이 됩니다.

결국 이 문제를 해결하려면, memo라는 고차 컴포넌트와 useCallback Hook을 잘 조합해야 합니다.

memo는 동일한 props로 동일한 결과를 렌더링 할 때, 결과를 메모이징하는 고차 컴포넌트이고,

useCallback은 메모이징한 콜백 함수를 반환하는 Hook입니다.

이 둘을 조합해서 잘 사용하면 불필요한 리랜더링 방지를 할 수 있습니다.

그런데, 어떻게 불필요한 렌더링이 일어나지 않았다고 증명할 수 있을까요?

그것은.. React 공식문서에서 React Dev Tool의 Profiler를 사용해서 확인하라고 나와있습니다.

 

📍📍React Dev Tool의 함정 기능

다들.. 이거 사용하고 계시죠?
Highlight updates when components render에 체크하면 사용할 수 있는 기능입니다.

React Dev Tool이라는 구글 확장 프로그램의 기능 중 하나인 하이라이트 기능입니다.

하이라이트 선이 표시되었다는 것은 렌더링이 발생했다 그렇게 알고 계실 것 같습니다

저도 그렇게 알고 있었습니다.

 

하지만 이 Profiler의 하이라이트 기능은 함정이 있습니다.

실제로 렌더링이 발생하지 않았는데, 렌더링이 발생했다고 하이라이트로 표시됩니다.

아래는 실험에 사용된 코드입니다.

 

export const 페이지 = () => {
  const [count, setCount] = useState<number>(0)

  const handleCountIncrease = () => {
    setCount((number) => number + 1)
  }

  const onReset = useCallback(() => {
    setCount(0)
  }, [])

  return (
    <Fragment>
      <div
        css={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          width: 200,
          height: 100,
          border: '1px solid black',
          borderRadius: 10,
        }}
        onClick={handleCountIncrease}
      >
        <p>{count}</p>
      </div>

      <Button onClick={onReset}>Reset</Button>
    </Fragment>
  )
}

const Button = memo((props: ButtonProps) => {
  return <button {...props} />
})

Button.displayName = 'Button'

박스를 클릭하면 count가 증가하고, Reset 버튼을 클릭하면, 초기화되는 간단한 UI입니다.

코드의 의도대로라면, count를 증가시킬 때, Button 컴포넌트가 리렌더링 되어서는 안 됩니다.

1. useCallback Hook으로 감싼 콜백 함수를 자식 컴포넌트에게 전달했습니다.
2. 자식 컴포넌트는 동일한 props라면, 메모이징 하도록 memo를 사용하여 고차 컴포넌트로 만들었습니다.

결과는? Reset 버튼에 하이라이트 선이 표시됩니다. 즉, 렌더링 되었다고 표시됩니다.

 

하지만 실제로는 렌더링 되지 않았습니다.

Reset 버튼의 내부에 console을 찍어보겠습니다.

박스를 클릭할 때마다 Reset 버튼이 렌더링 되었다면, console에 계속 출력될 거 같습니다.

 

const Button = memo((props: ButtonProps) => {
  console.log("저는 메모이제이션된 버튼입니다")
  return <button {...props} />
})

Button.displayName = 'Button'

 

결과는 렌더링되었다고 하이라이트로 표시되었지만, console에는 아무것도 출력되지 않았습니다.

그렇다면, 제가 코드를 잘못 작성한 것일까요?? 

정답은......... 아닙니다.

자 그럼… 이번에는 시각적으로도 하이라이트선이 표시되지 않도록 코드를 수정해 보겠습니다.

Reset 버튼 컴포넌트만 박스 내부로 옮겼습니다.

 

export const 페이지 = () => {
  const [count, setCount] = useState<number>(0)

  const handleCountIncrease = () => {
    setCount((number) => number + 1)
  }

  const onReset = useCallback(() => {
    setCount(0)
  }, [])

  return (
    <Fragment>
      <div
        css={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          width: 200,
          height: 100,
          border: '1px solid black',
          borderRadius: 10,
        }}
        onClick={handleCountIncrease}
      >
        <p>{count}</p>

        <Button onClick={onReset}>Reset</Button>
      </div>
    </Fragment>
  )
}

const Button = memo((props: ButtonProps) => {
  return <button {...props} />
})

Button.displayName = 'Button'

 

결과는?? 

하이라이트로 표시되지 않습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

놀랍지 않나요? 이 진실을 알았을 때, 정말 깜짝 놀랐습니다.

 

✏️ 마무리

 

React Dev Tool의 하이라이트 기능은 가짜다

진짜 성능이 개선되었는지, 리렌더링 되지 않았는지를 확인하려면 아래의 두 가지 중 하나를 해서 확인하자.

1. Profiler의 성능 그래프를 확인
2. 컴포넌트 내부에 console.log 찍기