React hook: useEffect, useState, useMemo, useCallback

useEffect

컴포넌트가 렌더링될 때 특정 작업을 수행하거나, 상태가 props가 변경될 때마다 특정 작업을 수행할 수 있도록 한다.

 

useState

state의 값이 변경되면 컴포넌트가 리렌더링 된다.

 

• useState: 상태가 업데이트되면 컴포넌트가 다시 렌더링된다. 렌더링에 반영되어 UI에 영향을 미치는 상태를 관리할 때 사용한.
• useRef: 값이 변경되더라도 컴포넌트가 다시 렌더링되지 않는다. 즉, useRef는 값이 변경되더라도 화면에 영향을 미치지 않는 상태를 관리할 때 사용한다.

따라서 입력 값이 화면에 즉시 반영되거나 다른 컴포넌트가 해당 상태를 참고해야 하는 경우가 아니라면 useRef를 사용하여 리렌더링을 방지할 수 있다.

 

 

useMemo

useMemo는 여러 개의 state가 있을 때 불필요한 리렌더링을 방지하는데 도움이 된다. 특히, 어떤 값이나 연산이 특정 상태의 변경에 의해서만 다시 계산되기를 원할 때 useMemo를 사용하면 성능을 최적화할 수 있다.

아래 코드에서 useMemo를 사용하지 않는다면 otherCount 값이 변경되었을 때도 불필요하게 fibonacci 값이 변경될 수 있다.

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

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);

  // 복잡한 계산 예시: 피보나치 수열 계산
  const calculateFibonacci = (num) => {
    console.log("Calculating Fibonacci...");
    if (num <= 1) return num;
    return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
  };

  // `count`가 변경될 때만 Fibonacci 계산 실행
  const fibonacci = useMemo(() => calculateFibonacci(count), [count]);

  return (
    <div>
      <h1>useMemo Example - Expensive Calculation</h1>
      <p>Count: {count}</p>
      <p>Fibonacci of Count: {fibonacci}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>

      <p>Other Count: {otherCount}</p>
      <button onClick={() => setOtherCount(otherCount + 1)}>Increase Other Count</button>
    </div>
  );
}

export default ExpensiveComponent;

 

 

useCallback

useMemo는 값을 memoization한다면, useCallback은 함수 자체를 메모이제이션 한다.

아래의 코드는 useMemo의 예시와 마찬가지로 count가 변할 때만 리렌더링 되도록 메모이제이션한 것이다.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

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

  // `handleClick` 함수가 `count`가 변경될 때만 새로 생성됨
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>useCallback Example</h1>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase Count</button>

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />

      {/* 자식 컴포넌트에 콜백 전달 */}
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

 

하지만 useMemo와 useCallback 모두 계산 비용 자체가 들기 때문에 복잡한 연산을 포함했을 경우에만 사용하는 것이 적절하다. 수천 개 이상의 항목을 필터링하거나 재귀적 연산이 필요하거나 모델을 사용하는 고비용 연산이 필요한 경우 등등..