React

React 렌더링 최적화

React 렌더링 최적화
React 애플리케이션의 성능 최적화는 웹 앱의 반응 속도를 높이고 사용자 경험을 개선하는 데 중요한 역할을 한다. React는 다양한 최적화 기술을 제공하여 불필요한 렌더링을 줄이고, 애플리케이션의 효율성을 향상시킬 수 있다.
  • 2024년 하반기에 있을 React 19의 업데이트로 인해 일부 최적화 작업이 자동으로 처리되게 되었지만, 이전 버전으로 작성된 코드 리딩을 위해 개념을 숙지할 필요는 있어 보인다.

React.memo()

  • React.memo()는 함수형 컴포넌트의 렌더링 성능을 향상시키기 위해 사용된다. 컴포넌트의 props가 변경되지 않았다면, 리액트는 컴포넌트의 재렌더링을 건너뛰고 마지막 렌더링 결과를 재사용한다. 여기서 변경되지 않았다는 의미는, props가 원시 타입일 경우 값이 변경되지 않았음을, 참조 타입일 경우 참조가 변경되지 않았음을 의미한다.
const MyComponent = React.memo(function MyComponent(props) {
  /* 렌더링 로직 */
});

useCallback()

useCallback() 훅은 함수를 메모이제이션하여 컴포넌트가 리렌더링될 때마다 동일한 함수를 재생성하는 것을 방지한다. 특히, 자식 컴포넌트에 함수를 props로 전달할 때 유용하게 사용된다.
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo()

useMemo() 훅은 메모이제이션된 값을 반환한다. 비용이 많이 드는 계산 작업의 결과값을 재활용할 수 있도록 해준다. 이는 입력값이 변경되지 않았다면, 컴포넌트가 리렌더링되어도 계산 과정을 생략하고 이전에 저장된 값을 재사용한다.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

React 19의 새로운 기능과 최적화

React 19 버전에서는 새로운 컴파일러 기능이 추가되며, 개발자가 수동으로 렌더링 최적화를 진행해야 하는 부담이 덜어졌다. 하지만 여전히 React.memo(), useCallback(), useMemo()와 같은 기법들을 적절하게 숙지하는 것은 코드 리딩을 위해 필요할 것으로 생각된다.