프론트엔드 노트

프론트엔드 개발에서 React를 사용할 때, 비효율적인 렌더링 문제는 종종 성능 저하의 원인이 됩니다. 이 블로그에서는 React 컴포넌트에서 비효율적인 렌더링 문제를 진단하고 해결하기 위한 방법에 대해 알아보겠습니다.

비효율적인 렌더링의 원인

React에서 컴포넌트가 렌더링되는 이유는 주로 상태(state)나 속성(props)의 변화 때문입니다. 컴포넌트가 불필요하게 자주 렌더링되면 성능 저하로 이어질 수 있습니다. 일반적으로 비효율적인 렌더링의 원인은 다음과 같습니다:

상태 변화: 상태가 변경되면 컴포넌트와 그 하위 컴포넌트가 모두 다시 렌더링됩니다.
부모 컴포넌트의 렌더링: 부모 컴포넌트가 렌더링될 때, 모든 자식 컴포넌트도 다시 렌더링됩니다. 이로 인해 불필요한 렌더링이 발생할 수 있습니다.
불필요한 상태 관리: 상태가 변화하지 않는 컴포넌트에서 상태를 관리하면 렌더링이 줄어들지 않습니다.

비효율적인 렌더링 문제 해결 방법

이제 비효율적인 렌더링 문제를 해결하기 위한 몇 가지 방법을 살펴보겠습니다.

1. React.memo 사용하기

React.memo

import React from 'react';

const MyComponent = React.memo(({ data }) => {
  console.log('렌더링: MyComponent');
  return <div>{data}</div>;
});

// 부모 컴포넌트에서 사용
const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  const data = '안녕하세요!';

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={() => setCount(count + 1)}>카운트: {count}</button>
    </div>
  );
};

위 예제에서 MyComponent는 data prop이 변경되지 않는 한 다시 렌더링되지 않습니다. 따라서 count 상태가 변경되더라도 MyComponent는 렌더링되지 않습니다.

2. useCallback과 useMemo 사용하기

useCallback

useMemo

useCallback: 함수를 메모이제이션하여 의존성 배열이 변경되지 않는 한 같은 함수를 재사용합니다.
useMemo: 계산된 값을 메모이제이션하여 의존성 배열이 변경되지 않는 한 같은 값을 재사용합니다.

다음은 이 두 훅을 사용하는 예입니다.

import React, { useState, useCallback, useMemo } from 'react';

const ChildComponent = React.memo(({ onClick, value }) => {
  console.log('렌더링: ChildComponent');
  return (
    <div>
      <button onClick={onClick}>버튼</button>
      <p>{value}</p>
    </div>
  );
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    alert('버튼이 클릭되었습니다!');
  }, []);

  const computedValue = useMemo(() => {
    return 현재 카운트: ${count};
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} value={computedValue} />
      <button onClick={() => setCount(count + 1)}>카운트: {count}</button>
    </div>
  );
};

위 예제에서 ChildComponent는 handleClick과 computedValue가 변경되지 않는 한 다시 렌더링되지 않습니다.

3. 상태 관리 최적화

상태를 관리하는 방법을 최적화하면 불필요한 렌더링을 줄일 수 있습니다. 예를 들어, 전역 상태 관리 라이브러리인 Redux를 사용할 경우, 연결된 컴포넌트만 렌더링되도록 할 수 있습니다. 리덕스의 connect 함수를 사용하면 필요한 상태만 구독할 수 있습니다.

import { connect } from 'react-redux';

const MyComponent = ({ data }) => {
  return <div>{data}</div>;
};

const mapStateToProps = (state) => ({
  data: state.data,
});

export default connect(mapStateToProps)(MyComponent);

위와 같이 connect를 통해 필요한 상태만 구독하여 비효율적인 렌더링을 줄일 수 있습니다.

마무리

React에서 비효율적인 렌더링 문제는 개발자가 성능을 고려하여 컴포넌트를 설계하는 것이 중요합니다. 위에서 소개한 React.memo, useCallback, useMemo와 같은 최적화 도구를 활용하면 불필요한 렌더링을 줄이고 성능을 개선할 수 있습니다. 이를 통해 사용자 경험을 더욱 향상시키고, 쾌적한 웹 애플리케이션을 개발할 수 있습니다.

React 컴포넌트에서 비효율적인 렌더링 문제 해결하기

비효율적인 렌더링의 원인

비효율적인 렌더링 문제 해결 방법

1. React.memo 사용하기

2. useCallback과 useMemo 사용하기

3. 상태 관리 최적화

마무리