[React] useState 란?

useState는 React의 함수형 컴포넌트에서 상태 관리를 가능하게 하는 Hook입니다.

클래스 컴포넌트에서 this.state와 this.setState를 사용하여 상태를 관리하는 것과 유사한 기능을 제공하지만, 더 간단하고 직관적인 API로 함수형 컴포넌트에서 상태를 사용할 수 있도록 합니다.

기본 사용법

useState는 초기 상태를 인자로 받고, 상태 변수와 그 상태를 업데이트하는 함수를 쌍으로 반환합니다.

const [state, setState] = useState(initialState);

• state: 현재 상태의 값입니다.
• setState: 상태를 업데이트하는 함수입니다. 이 함수에 새 상태 값을 전달하면 컴포넌트가 리렌더링됩니다.
• initialState: 상태의 초기 값을 정의합니다. 이 값은 첫 렌더링에서만 사용됩니다.

예제: 카운터 구현하기

다음은 useState를 사용하여 간단한 카운터를 구현한 예제입니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 0은 count의 초기값입니다.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

이 예제에서는 useState를 사용하여 count라는 상태 변수를 생성하고, 이 변수의 초기값을 0으로 설정합니다. 사용자가 버튼을 클릭하면 setCount 함수가 호출되어 count 값이 1 증가하고, 이로 인해 컴포넌트가 리렌더링됩니다.

상태 업데이트 로직

setState 함수는 상태를 업데이트하고 컴포넌트를 리렌더링하는 데 사용됩니다. 상태 업데이트 로직에는 두 가지 패턴이 있습니다.

• 새로운 상태 값 지정: 직접 새로운 상태 값을 setState에 전달합니다.

setCount(5); // count를 5로 설정

• 업데이트 함수 사용: 현재 상태를 기반으로 새로운 상태를 계산할 때 유용합니다. 이전 상태값을 인자로 받는 함수를 setState에 전달합니다.

setCount(previousCount => previousCount + 1); // 이전 count에 1을 더함

결론

useState 훅은 React에서 함수형 컴포넌트의 상태를 간단하고 효율적으로 관리할 수 있는 방법을 제공합니다. 각 useState 호출은 컴포넌트의 한 조각의 상태를 관리합니다. 이를 통해, 함수형 컴포넌트에서도 클래스 컴포넌트와 마찬가지로 상태에 따라 동적인 데이터를 렌더링하고 사용자 입력을 처리할 수 있습니다. useState의 사용은 React 앱 개발의 기본이며, 다른 고급 훅과 함께 사용하여 보다 복잡한 상태 관리 로직을 구현할 수 있습니다.