출처 : overreacted.io - Before You memo() (2021-02-23)

React 성능 최적화에 관련된 게시글은 이미 많습니다. 보통 상태 업데이트가 느린 경우, 우리는:

빌드가 production 버전인지 확인합니다. (Development 빌드는 의도적으로 느립니다. 심한 경우에는 10배나 느려질 수 있습니다.)
상태를 필요 이상으로 tree 상위에 위치하지 않았는지 확인합니다. (예를 들어, input 필드의 상태를 전역 store에 두 것은 최선이 아닐 수 있습니다.)
React DevTools Profiler 리렌더링 현황을 파악하고, 성능 부담이 큰 서브트리를 memo()로 감쌉니다. (그리고 필요한 곳에 useMemo()를 추가합니다.)

이 마지막 단계는 번거롭습니다. 특히나 컴포넌트가 중앙에 위치하면 더욱 그렇습니다. 이상적으로는 컴파일러가 이 일을 해야 하는데 미래에는 그렇게 될수도 있겠죠.

이 게시글에서는 위와는 다른 2가지 기법을 공유할 것입니다. 놀랍도록 기본적이라 대게 자신이 성능을 향상시켰다는 생각조차 하지 못합니다.

이 기법들은 이미 알던 것들에 추가로 활용할 수 있습니다. memo나 useMemo를 대체하진 않지만, 우선적으로 시도해보기 좋은 기법들입니다.

(인위적으로) 느린 컴포넌트

다음은 심각한 렌더링 성능 문제를 가진 컴포넌트입니다.

import { useState } from 'react';

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

function ExpensiveTree() {
  let now = performance.now();
  while (performance.now() - now < 100) {
    // Artificial delay -- do nothing for 100ms
  }
  return <p>I am a very slow component tree.</p>;
}

App안에 위치한 color가 변할 때마다 <ExpensiveTree />가 매우 느리게 리렌더링 되도록 인위적으로 딜레이를 추가했습니다. 여기에 단지 memo()를 추가하고 끝낼 수 있지만, 이 방법에 관해 이미 많은 게시글들이 있으니 제쳐두겠습니다. 대신 2가지 다른 해결 방안을 보여드리겠습니다.

해결 방안 1: 상태를 아래로 이동

렌더링 되는 코드를 자세히 살펴보면, 변환되는 트리에서 color값을 실제로 사용하는 부분은 단 하나뿐인 것을 확인할 수 있습니다 :

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

이 부분을 Form 컴포넌트로 분리하면서 상태를 한 단계 아래로 내려줍니다 :

export default function App() {
  return (
    <>
      <Form />
      <ExpensiveTree />
    </>
  );
}

function Form() {
  let [color, setColor] = useState('red');
  return (
    <>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
    </>
  );
}

이제 color값이 변하면 오직 Form만 리렌더됩니다. 문제가 해결됐습니다.

해결 방안 2: 컨텐츠를 상위로 이동

해결 방안 1은 상태가 <ExpensiveTree />의 상위에서도 사용이 된다면 효과가 없습니다. 예시로, color를 부모 <div>에 포함시켜봅시다 :

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

이제 color값을 사용하지 않는 부분만 분리할 수 없습니다. <ExpensiveTree />를 감싸는 부모 <div>에서도 color를 사용하고 있으니까요. memo를 사용하지 않을 수 없겠죠?

하지만 과연 그럴까요?

sandbox로 실험하면서 다른 방법을 찾아보세요.

…

…

…

정답은 놀랍도록 간단합니다 :

export default function App() {
  return (
    <ColorPicker>
      <p>Hello, world!</p>
      <ExpensiveTree />
    </ColorPicker>
  );
}

function ColorPicker({ children }) {
  let [color, setColor] = useState("red");
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  );
}

App 컴포넌트를 두 부분으로 나눴습니다. color값을 사용하는 부분은 color 상태 변수와 함께 ColorPicker로 분리되었습니다.
color값을 사용하지 않는 부분은 그대로 App 컴포넌트에 남았습니다. 이 부분은 ColorPicker에 JSX 컨텐츠인 children prop으로 넘겨집니다.

color값이 변하면 ColorPicker는 리렌더링되지만 children prop은 값이 변경되지 않아 React가 서브트리를 수정하지 않습니다.

결과적으로 <ExpensiveTree />는 리렌더링 되지 않습니다.

여기서 얻을 수 있는 교훈은 무엇일까?

memo나 useMemo와 같은 최적화 기능을 사용하기 전에, 코드에서 변경되는 부분과 그렇지 않은 부분을 나눌 수 있는지 살펴보는 것이 좋습니다.
이 접근법이 흥미로운 것은 본질적으로는 성능 최적화와는 별 상관이 없다는 점입니다. children prop을 사용하여 컴포넌트를 분리하는 방식은 앱의 데이터 흐름을 따라가기 쉽게할 뿐만 아니라 트리 아래로 뿌려지는 props의 갯수도 줄일 수 있습니다. 이와 같은 성능 개선은 부수적 효과일뿐 최종 목표는 아닙니다.

흥미롭게도, 이 패턴은 미래에 더 많은 성능상 이점도 열어줍니다.

예를 들자면, Server Components가 정식으로 사용 가능해지면, ColorPicker 컴포넌트가 서버에서 children을 받을 수 있게 됩니다. 그러면 <ExpensiveTree /> 컴포넌트 전체든 일부든 서버에서 실행 가능하며, 최상위 상태 변경 시에도 클라이언트에서 해당 영역을 “우회”하게 됩니다.

이건 memo 조차 할 수 없는 일입니다! 그래도 다시 강조하자면 이 접근법들은 상호 보완적입니다. 상태를 아래로 이동시키는 것(뿐만 아니라 위로 올리는 것)을 등한시 하지마세요.

그 이후에, 필요 시 Profiler를 사용하여 memo를 추가하세요.

예전에 읽어본 내용 같은데?

그게 맞을 겁니다.

이건 새로운 방법이 아닙니다. 이건 React 컴포넌트 합성 방식의 자연스러운 귀결입니다. 너무 간단해서 간과되기 쉽지만 더 주목받아야 할 패턴입니다.

❈ 오역/의역 있을 수 있음

❈ Server Components – React

[FE/react] Before You memo()