성능이 뛰어난 React 애플리케이션을 구축하는 열쇠 중 하나는 불필요한 재렌더링을 피하는 것입니다. React의 렌더링 엔진은 효율적이지만 필요하지 않은 경우 다시 렌더링하는 것을 방지하는 것이 여전히 중요합니다. 이 게시물에서는 흔히 발생하는 실수와 이를 방지하는 방법을 다룹니다.

1. React.memo를 사용하여 구성요소 메모하기

메모이제이션을 사용하면 구성 요소의 소품이 변경되지 않은 경우 다시 렌더링을 건너뛸 수 있습니다. 하지만 React.memo는 맞춤 비교 기능을 구현하지 않아 오용되기 쉽습니다.

잘못된 사용법:

const MemoizedComponent = React.memo(MyComponent);

이것은 props 참조가 변경되었는지만 확인하며, 항상 충분하지 않을 수 있습니다.

올바른 사용법:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

여기에서는 itemId 속성이 변경될 때만 다시 렌더링을 트리거하는 사용자 정의 비교 함수를 사용합니다.

2. 인라인 함수의 과도한 사용 방지

JSX 내에서 인라인 함수를 사용하면 React가 모든 렌더링에서 새 함수를 새 prop으로 처리하므로 불필요한 다시 렌더링이 발생할 수 있습니다.

잘못된 사용법:

function ButtonComponent() {
  return  handleClick()}>Click me;
}

이로 인해 모든 렌더링에서 handlerClick이 다시 생성되어 불필요한 다시 렌더링이 발생합니다.

올바른 사용법:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

useCallback을 사용하여 handlerClick 함수를 메모하여 각 렌더링에서 불필요한 재생성을 방지합니다.

3. PureComponent 활용

클래스 컴포넌트로 작업할 때 React.PureComponent를 사용하면 props나 상태가 변경되는 경우에만 컴포넌트가 다시 렌더링됩니다. React.Component를 사용하는 경우 불필요한 다시 렌더링이 발생할 수 있습니다.

잘못된 사용법:

class CardComponent extends React.Component {
  // Component logic
}

올바른 사용법:

class CardComponent extends React.PureComponent {
  // Component logic
}

React.PureComponent를 확장함으로써 React는 불필요한 재렌더링을 방지하면서 props와 state를 얕게 비교합니다.

4. 기능적 구성 요소에서 useSelector 최적화

react-redux에서 useSelector를 사용할 때 필요한 상태 부분만 선택하는 것이 중요합니다.

잘못된 사용법:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

이렇게 하면 상태의 일부가 변경될 때마다 구성 요소가 다시 렌더링됩니다.

올바른 사용법:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

상태에서 꼭 필요한 부분만 선택함으로써 재렌더링을 최소화할 수 있습니다.

5. 클래스 컴포넌트에 shouldComponentUpdate 구현

PureComponent를 확장하지 않는 클래스 구성 요소의 경우 shouldComponentUpdate를 수동으로 구현하면 구성 요소가 다시 렌더링되는 시점을 보다 세밀하게 제어할 수 있습니다.

잘못된 사용법:

class ListItem extends React.Component {
  // Component logic
}

props와 상태가 변경되지 않은 경우에도 상위 구성 요소가 렌더링될 때마다 다시 렌더링됩니다.

올바른 사용법:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

shouldComponentUpdate를 사용자 정의하여 itemId prop 또는 값 상태가 변경될 때만 구성 요소가 다시 렌더링되도록 합니다.

결론

이러한 기술을 사용하면 React 애플리케이션에서 불필요한 다시 렌더링을 크게 줄여 성능을 향상할 수 있습니다. React.memo로 메모 기능을 구현하고, PureComponent를 활용하고, shouldComponentUpdate를 미세 조정하는 것은 React 구성 요소를 최적화하기 위한 핵심 전략입니다.

렌더링을 최적화하는 시기와 방법을 이해하면 더 빠르고 응답성이 뛰어난 애플리케이션을 제공함으로써 사용자 경험을 크게 향상할 수 있습니다.

참고자료:

1. GeeksforGeeks. (2023). React에서 메모란 무엇인가요?
2. 동기화. (2024). React의 메모화
3. 하이그래프. (2024). 리액트 메모란 무엇이고 어떻게 사용하나요?
4. Refine.dev. (2024). 예제가 포함된 React 메모 가이드

이 가이드가 유용했다면 다른 사람들과 공유해 보세요! ?

이 블로그는 최신 웹 개발 관행의 명확성과 관련성을 위해 모범 사례를 통합하고 변수 이름을 변경하는 동시에 React 애플리케이션에서 불필요한 재렌더링을 피하는 방법에 대한 업데이트되고 포괄적인 개요를 제공합니다.

인용:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-comComponents-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo