리액트 성능 최적화 Hook 개념정리

성능 최적화

useMemo

컴포넌트의 렌더링이 발생할 때마다 값을 계산하는 대신, 이전에 계산된 값을 재사용한다.

이로써 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있다.

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

function ExpensiveCalculation({ value }) {
  // useMemo를 사용하여 계산 결과를 메모이제이션
  const result = useMemo(() => {
    console.log('Calculating...');
    return value * 2;
  }, [value]); // value 값이 변경될 때만 재계산

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

function App() {
  const [inputValue, setInputValue] = useState(0);

  return (
    <div>
      <input type="number"   value={inputValue}
        onChange={e => setInputValue(parseInt(e.target.value))} />
      <ExpensiveCalculation value={inputValue} />
    </div>
  );
}

export default App;

ExpensiveCalculation 컴포넌트 내에서 useMemo를 사용하여 result 값을 메모이제이션한다.

이렇게 하면 value 값이 변경되지 않는 한, result 값을 다시 계산하지 않고 이전에 계산된 결과를 사용한다.

 

useMemo의 두 번째 인자로 의존성 배열을 전달하고 의존성 배열에 포함된 값이 변경될 때만 메모이제이션된 값이 다시 계산된다.

이전에 계산된 결과를 재사용하려는 값이 변경되는 경우에만 useMemo를 사용하면 된다.

usememo의 반환값은 함수가 아니라 값!이다  !

 

 

 

React.memo  

리액트 컴포넌트의 성능을 최적화하기 위해 사용되는 고차 컴포넌트(Higher-Order Component)이다.

이를 사용하면 컴포넌트의 리렌더링(부모에게 전달된 props가 변경되지 않으면 리렌더 X)을 줄일 수 있다

import React from 'react';

const Counter = React.memo(({ count }) => {
  console.log('Counter component rendered');
  return <p>Count: {count}</p>;
});

export default Counter;

위의 예시에서 Counter 컴포넌트는 React.memo로 감싸져 있다.

이로 인해 부모 컴포넌트의 상태가 변경되어도 count 프로퍼티가 변경되지 않는 한 컴포넌트가 리렌더링되지 않는다.

즉, 같은 count 값으로 여러 번 렌더링해도 실제로는 한 번만 렌더링되는 것을 확인할 수 있다.

 

React.memo를 사용할 때 주의할 점은, 이를 사용해도 상태나 프로퍼티가 변경될 때마다 컴포넌트가 리렌더링되지 않는 것이 아니라,

해당 컴포넌트의 상태나 프로퍼티가 변경되지 않는 한 리렌더링을 방지한다는 점이다.

 

useCallback 

그 의존성 배열이 변경되면 콜백함수 실행 즉, 불필요한 함수의 성성과 참조를 방지할 수 있다.

useCallback은 주로 자식 컴포넌트에 props로 전달되는 콜백 함수들을 최적화할 때 사용된다.

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

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

  // useCallback을 사용하여 콜백 함수를 메모이제이션
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

 increment 함수는 useCallback을 사용하여 메모이제이션된다.

이로 인해 count 상태가 변경되어 컴포넌트가 리렌더링되더라도, increment 함수는 동일한 함수 인스턴스를 유지하게 된다.

따라서 increment 함수 내에서 사용하는 setCount 함수에 의존하는 부분이 리렌더링되지 않아도 된다.

 

useCallback의 두 번째 인자로 의존성 배열을 전달할 수 있다.

의존성 배열은 해당 배열의 값이 변경될 때에만 메모이제이션된 함수가 다시 생성된다.

만약 빈 배열을 전달하면 컴포넌트가 마운트된 후 한 번만 함수가 생성된다.