리액트에서 메모이제이션을 어떤 방식으로 하는지?

안녕하세요! 오늘은 React에서 메모이제이션을 사용하는 방법에 대해 알아보겠습니다. React에서 메모이제이션은 성능 최적화를 위해 자주 사용되며, 주로 useMemo와 useCallback 훅을 통해 구현됩니다.

리액트에서 메모이제이션을 어떤 방식으로 하는지?

1. useMemo 훅

정의

useMemo 훅은 계산 비용이 높은 함수의 결과를 메모이제이션하여 성능을 최적화합니다. 의존성 배열이 변경되지 않는 한, 이전에 계산된 결과를 반환합니다.

사용 예제

import React, { useMemo } from 'react';

function ExpensiveComputation({ num }) {
    const compute = (n) => {
        console.log('Computing...');
        return n * 2;
    };

    const result = useMemo(() => compute(num), [num]);

    return <div>Result: {result}</div>;
}

export default ExpensiveComputation;

주요 용도

• 연산 비용이 높은 함수의 결과를 캐싱하여 불필요한 재계산을 방지
• 컴포넌트의 리렌더링 시 성능 최적화

2. useCallback 훅

정의

useCallback 훅은 함수를 메모이제이션하여 성능을 최적화합니다. 의존성 배열이 변경되지 않는 한, 동일한 함수 객체를 반환합니다.

사용 예제

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

const Button = React.memo(({ handleClick }) => {
    console.log('Button rendered');
    return <button onClick={handleClick}>Increment</button>;
});

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

    const increment = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <Button handleClick={increment} />
        </div>
    );
}

export default App;

주요 용도

• 컴포넌트의 리렌더링을 방지하기 위해 콜백 함수를 메모이제이션
• 자식 컴포넌트에 함수를 props로 전달할 때 불필요한 리렌더링 방지

3. React.memo 고차 컴포넌트

정의

React.memo는 고차 컴포넌트로, props가 변경되지 않으면 컴포넌트를 리렌더링하지 않습니다. 이는 함수형 컴포넌트의 메모이제이션에 유용합니다.

사용 예제

import React from 'react';

const MyComponent = React.memo(({ value }) => {
    console.log('Component rendered');
    return <div>{value}</div>;
});

export default MyComponent;

주요 용도

• 컴포넌트의 리렌더링을 방지하여 성능 최적화

4. useMemo와 useCallback의 차이점

특성	useMemo	useCallback
반환 값	값 (계산된 결과)	함수
주요 목적	연산 비용이 높은 계산의 결과를 메모이제이션	함수를 메모이제이션하여 리렌더링 방지
사용 시기	복잡한 계산이 필요할 때	자식 컴포넌트에 콜백 함수를 전달할 때

예시 비교

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

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

    // useMemo 사용 예시
    const memoizedValue = useMemo(() => {
        return count * 2;
    }, [count]);

    // useCallback 사용 예시
    const memoizedCallback = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return (
        <div>
            <p>Memoized Value: {memoizedValue}</p>
            <button onClick={memoizedCallback}>Increment</button>
        </div>
    );
}

export default Example;

결론

React에서 메모이제이션을 통해 성능을 최적화할 수 있는 다양한 방법이 있습니다. useMemo는 연산 비용이 높은 함수의 결과를 캐싱하는 데 사용되며, useCallback은 함수를 메모이제이션하여 불필요한 리렌더링을 방지합니다. 또한, React.memo를 사용하여 함수형 컴포넌트의 리렌더링을 방지할 수 있습니다. 이들 기법을 적절히 활용하여 성능을 최적화하고, 보다 반응성이 좋은 React 애플리케이션을 개발해 보세요.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.