[React] React 최적화

목차

React의 최적화 기법: 성능 향상을 위한 핵심 전략 🚀📈

안녕하세요, 현대적 웹 개발을 추구하는 여러분! React 애플리케이션의 성능 최적화는 사용자 경험을 향상시키고, 애플리케이션의 반응성을 높이는 중요한 과정입니다. 오늘은 React에서 애플리케이션의 성능을 최적화하는 다양한 기법에 대해 알아보겠습니다. 이 포스트를 통해 불필요한 렌더링을 줄이고, 효율적인 컴포넌트 업데이트를 구현하여 더욱 빠르고 반응적인 애플리케이션을 만들어 보세요.

---

1. PureComponent와 React.memo

PureComponent: 클래스 컴포넌트에서 React.PureComponent를 상속받으면, shouldComponentUpdate()가 자동으로 구현됩니다. 이는 props와 state의 얕은 비교를 통해 불필요한 업데이트를 방지합니다.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

React.memo: 함수 컴포넌트에서는 React.memo를 사용하여 컴포넌트의 렌더링을 최적화할 수 있습니다. 이 또한 props의 얕은 비교를 통해 컴포넌트의 재렌더링을 방지합니다.

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  return <div>{props.name}</div>;
});

 

2. shouldComponentUpdate 사용하기

shouldComponentUpdate 메서드를 직접 구현하여 컴포넌트의 업데이트 여부를 결정할 수 있습니다. 이 메서드는 새 props나 state를 받을 때 호출되며, true 또는 false를 반환합니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 커스텀 비교 로직
    return nextProps.name !== this.props.name;
  }

  render() {
    return <div>{this.props.name}</div>;
  }
}

 

3. useMemo와 useCallback 사용하기

useMemo: 값의 계산 결과를 메모이제이션하여 성능을 향상시킵니다. 계산 비용이 높은 함수의 결과를 저장하고, 의존성이 변경될 때만 다시 계산합니다.

import React, { useMemo } from 'react';

const expensiveCalculation = (num) => {
  console.log('Calculating...');
  return num * 2;
};

function MyComponent({ num }) {
  const result = useMemo(() => expensiveCalculation(num), [num]);
  return <div>{result}</div>;
}

useCallback: 함수를 메모이제이션하여 불필요한 함수 생성을 방지합니다. 이는 주로 이벤트 핸들러와 같이 자주 사용되는 함수에 유용합니다.

import React, { useCallback } from 'react';

function MyComponent({ id, onToggle }) {
  const handleClick = useCallback(() => {
    onToggle(id);
  }, [id, onToggle]);

  return <button onClick={handleClick}>Toggle</button>;
}

 

4. 리스트 렌더링 최적화

리스트를 렌더링할 때 key prop을 올바르게 설정하여 React가 불필요한 렌더링을 방지하도록 합니다. key는 각 요소를 고유하게 식별하는 데 사용됩니다.

function MyList({ items }) {
  return (
    <

ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

 

마무리하며...

React 애플리케이션의 성능 최적화는 사용자에게 빠르고 부드러운 인터랙션을 제공하는 데 중요합니다. 위에서 소개한 최적화 기법들을 적절히 활용하여 애플리케이션의 성능을 개선하고, 더 나은 사용자 경험을 제공하세요. 성능 최적화는 지속적인 프로세스이므로, 애플리케이션을 모니터링하고 지속적으로 개선하는 노력이 필요합니다.

---

Reference:

Optimizing Performance – React

React Top-Level API – React

Hooks API Reference – React