React에서 React.memo 사용법

 

React 애플리케이션을 개발할 때, 성능 최적화는 매우 중요한 과제입니다. 특히, 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지하는 것은 사용자 경험을 향상시키는 데 큰 역할을 합니다. React.memo는 이러한 문제를 해결하기 위해 제공되는 기능으로, 컴포넌트 메모이제이션을 통해 성능을 최적화할 수 있습니다. 이번 글에서는 React.memo의 사용법과 이를 통해 얻을 수 있는 이점, 그리고 실제 예제 코드를 통해 이를 어떻게 활용할 수 있는지 자세히 알아보겠습니다.

React.memo란?

React.memo는 고차 컴포넌트(Higher Order Component, HOC)로, 함수형 컴포넌트를 메모이제이션(memoization)하여 불필요한 리렌더링을 방지합니다. 간단히 말해, 동일한 props를 전달받을 경우, 이전 렌더링 결과를 재사용함으로써 성능을 최적화하는 역할을 합니다.

사용법

React.memo의 기본적인 사용법은 매우 간단합니다. 함수형 컴포넌트를 감싸기만 하면 됩니다. 다음은 기본적인 사용법을 보여주는 예제입니다.

import React from 'react';

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

export default MyComponent;

이렇게 하면 MyComponent는 props.value가 변경되지 않는 한 다시 렌더링되지 않습니다.

React.memo의 동작 원리

React.memo는 props가 변경되었는지 여부를 판단하여 컴포넌트를 다시 렌더링할지 결정합니다. 기본적으로 얕은 비교(Shallow Comparison)를 사용하여 이전 props와 새로운 props를 비교합니다. 따라서, props가 객체나 배열일 경우, 내부 값이 변경되더라도 참조가 동일하면 다시 렌더링되지 않습니다.

React.memo와 useMemo의 차이점

React.memo와 유사한 기능을 제공하는 훅(Hook)으로 useMemo가 있습니다. 이 둘의 차이점은 다음과 같습니다.

• React.memo: 컴포넌트 전체를 메모이제이션하여 불필요한 리렌더링을 방지합니다.
• useMemo: 특정 값이나 함수의 결과를 메모이제이션합니다.

둘 다 성능 최적화를 위한 도구이지만, 적용 대상과 사용 방식이 다릅니다.

React.memo와 콜백 함수

React.memo는 기본적으로 props의 변경 여부를 판단하여 리렌더링을 결정합니다. 이때, props로 함수가 전달되면 매번 새로운 참조로 간주하여 리렌더링될 수 있습니다. 이를 방지하기 위해 useCallback 훅을 사용하여 함수를 메모이제이션할 수 있습니다.

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

const MyComponent = React.memo(function MyComponent({ onClick }) {
    return <button onClick={onClick}>Click me</button>;
});

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

    const handleClick = useCallback(() => {
        setCount(prevCount => prevCount + 1);
    }, []);

    return <MyComponent onClick={handleClick} />;
}

export default ParentComponent;

React.memo의 커스텀 비교 함수

기본적인 얕은 비교 외에, 커스텀 비교 함수를 사용하여 리렌더링 여부를 결정할 수도 있습니다. 이 함수는 두 개의 인자(prevProps와 nextProps)를 받아 불리언 값을 반환합니다. 이 값이 true이면 리렌더링을 방지하고, false이면 리렌더링을 수행합니다.

import React from 'react';

function areEqual(prevProps, nextProps) {
    // 커스텀 비교 로직
    return prevProps.value === nextProps.value;
}

const MyComponent = React.memo(function MyComponent(props) {
    return <div>{props.value}</div>;
}, areEqual);

export default MyComponent;

예제 코드

React.memo의 실제 사용 예제를 통해 어떻게 성능 최적화를 할 수 있는지 알아보겠습니다.

import React, { useState } from 'react';

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

function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    return (
        <div>
            <ExpensiveComponent count={count} />
            <button onClick={() => setCount(count + 1)}>Increase Count</button>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
        </div>
    );
}

export default App;

위 예제에서 ExpensiveComponent는 count가 변경될 때만 다시 렌더링됩니다. text 입력 필드의 값이 변경될 때는 ExpensiveComponent가 다시 렌더링되지 않으므로 성능을 최적화할 수 있습니다.

결론

React.memo는 컴포넌트 메모이제이션을 통해 성능을 최적화하는 강력한 도구입니다. 특히, 대규모 애플리케이션에서 불필요한 리렌더링을 방지하여 사용자 경험을 향상시키는 데 큰 도움을 줍니다. React.memo의 사용법과 이를 활용한 최적화 방법을 잘 이해하고 적용하면 더욱 효율적인 React 애플리케이션을 개발할 수 있을 것입니다.