useState, useEffect, useMemo 의 차이

React에서 useState, useEffect, useMemo는 각각 상태 관리, 컴포넌트의 라이프사이클 그리고 성능 최적화를 위해 사용되는 중요한 Hooks입니다.

이 세 Hook은 서로 다른 목적을 가지고 있지만, 함께 사용하면 React 앱의 기능과 성능을 크게 향상시킬 수 있습니다.

 

1. useState

useState는 함수형 컴포넌트에서 상태를 관리하기 위해 사용되는 Hook입니다. 상태는 컴포넌트가 사용자와 상호작용하며 변경해야 할 데이터, 예를 들어 사용자의 입력, 클릭 상태, 선택한 항목 등을 나타냅니다.

사용 방법

useState는 상태의 초기값을 인자로 받으며, 상태 값과 그 값을 업데이트할 함수를 반환합니다.

import React, { useState } from 'react';

function Counter() {
  // count는 상태 값, setCount는 상태 업데이트 함수
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>버튼</button>
    </div>
  );
}

 

특징과 작동 원리

• useState는 초기값을 인자로 받아서 [상태값, 상태 업데이트 함수] 배열을 반환합니다.
• 상태가 변경될 때마다 컴포넌트는 자동으로 다시 렌더링됩니다.
• setCount 같은 상태 업데이트 함수를 호출할 때마다 React는 해당 상태를 가진 컴포넌트를 다시 실행해서 최신 상태를 반영합니다.

 

 

2. useEffect

useEffect는 컴포넌트가 마운트(처음 렌더링)될 때, 업데이트될 때, 언마운트(제거)될 때 특정 동작을 수행할 수 있게 해주는 Hook입니다. 즉, 컴포넌트의 라이프사이클과 관련된 작업을 수행할 때 유용합니다. 예를 들어, 데이터를 가져오거나 (fetch), 이벤트 리스너를 설정하는 작업이 대표적입니다.

 

사용 방법

useEffect는 함수와 의존성 배열을 인자로 받습니다. 함수 내부에 우리가 수행할 작업을 정의합니다.

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

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

  // count가 변경될 때마다 실행되는 useEffect
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 컴포넌트가 언마운트 될 때 타이머를 정리
    return () => clearInterval(timer);
  }, []); // 빈 배열로 설정하면 컴포넌트가 마운트될 때 한 번만 실행됨

  return <p>Count: {count}</p>;
}

 

특징과 작동 원리

• 의존성 배열을 통해 특정 상태나 값이 변경될 때만 함수가 실행되도록 제어할 수 있습니다.
  • 빈 배열 []을 넣으면 컴포넌트가 처음 마운트될 때만 실행됩니다.
  • 특정 값을 배열에 넣으면 그 값이 변경될 때마다 useEffect가 실행됩니다.
  • 의존성 배열이 없으면 컴포넌트가 매 렌더링마다 useEffect를 실행합니다.
• 정리 함수(return)를 사용하면 컴포넌트가 사라질 때(언마운트될 때) 정리 작업을 수행할 수 있습니다.

 

3. useMemo

useMemo는 성능 최적화를 위해 사용되는 Hook으로, 연산량이 많은 작업이 있을 때 불필요한 재계산을 방지해주는 역할을 합니다. 컴포넌트가 다시 렌더링될 때 매번 실행하지 않고, 특정 값이 변경될 때에만 계산을 다시 수행하도록 제어할 수 있습니다.

 

사용 방법

useMemo는 값을 반환하는 함수와 의존성 배열을 인자로 받습니다. useMemo는 함수가 반환한 값을 기억(memoization)하여 의존성 값이 변경될 때에만 함수를 재실행하고, 그렇지 않으면 이전에 계산된 값을 반환합니다.

 

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

function ExpensiveCalculationComponent({ number }) {
  // 큰 연산이 필요할 때 메모이제이션 사용
  const factorial = useMemo(() => {
    console.log('Calculating factorial...');
    return factorialOf(number);
  }, [number]); // number가 변경될 때에만 factorial 재계산

  return <p>Factorial of {number}: {factorial}</p>;
}

function factorialOf(n) {
  return n <= 0 ? 1 : n * factorialOf(n - 1);
}

 

특징과 작동 원리

• useMemo는 계산량이 많거나 비용이 큰 작업을 할 때 유용합니다. 예를 들어, 필터링, 정렬, 복잡한 수학적 계산 등이 포함된 함수에서 사용합니다.
• 의존성 배열에 있는 값이 변경될 때에만 계산을 다시 수행하고, 그렇지 않으면 기존 값을 재사용합니다.
• 메모이제이션을 통해 불필요한 렌더링과 계산을 방지하여 성능을 최적화할 수 있습니다.

 

세 가지 Hook의 차이점 요약

     기능                           useState                                            useEffect                                           useMemo

목적	컴포넌트의 상태 관리	컴포넌트의 라이프사이클 관리	컴포넌트의 성능 최적화
주요 사용 사례	사용자 입력, 클릭, 선택한 항목 등	API 호출, 이벤트 리스너 설정, 타이머 설정	필터링, 정렬, 복잡한 연산
리렌더링	상태가 업데이트되면 컴포넌트가 다시 렌더링됨	의존성 배열에 있는 값이 변경될 때 실행	의존성 배열에 있는 값이 변경될 때에만 재계산
반환 값	[상태 값, 상태 업데이트 함수]	정리(clean-up) 함수가 포함된 함수	메모이제이션된 값