함수형 컴포넌트에서의 상태 관리: useState 훅 사용법과 예제

함수형 컴포넌트는 리액트의 주요 컴포넌트 유형 중 하나로, 훨씬 간단하고 가독성이 좋습니다. useState 훅은 함수형 컴포넌트에서 상태를 관리하기 위해 사용되는 기본 도구입니다. 이 글에서는 useState 훅의 사용법과 예제를 통해 상태 관리의 기초를 알아보겠습니다.

useState의 기본 사용법

useState 훅은 함수형 컴포넌트 내에서 상태 변수와 그 상태를 갱신할 수 있는 함수를 제공합니다. 일반적으로 다음과 같이 사용됩니다:

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

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

  return (
    <div>
      <p>현재 카운트 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 예제에서 useState(0)은 count라는 상태 변수와 setCount라는 상태 갱신 함수를 반환합니다. count 변수는 현재 상태 값을 담고 있고, setCount 함수는 그 상태를 갱신하는 데 사용됩니다. 초기 상태 값은 0으로 설정되었습니다.

여러 상태 관리하기

함수형 컴포넌트에서는 여러 개의 상태 변수를 useState 훅을 사용하여 개별적으로 관리할 수 있습니다. 예를 들어, 사용자 정보와 관련된 상태를 관리하려면 다음과 같이 할 수 있습니다:

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

function UserProfile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  return (
    <div>
      <input
        type="text"
        placeholder="이름을 입력하세요"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="나이를 입력하세요"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </div>
  );
}

위 예제에서는 name과 age라는 두 개의 상태 변수를 각각 관리하고 있습니다. 이는 컴포넌트에서 여러 상태를 독립적으로 관리하기에 유용합니다.

객체 상태 관리하기

하나의 객체 내에 여러 상태를 포함시키고 싶을 때도 있습니다. 이 경우 상태 갱신 시 기존 상태를 전파하는 것을 잊지 말아야 합니다:

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

function UserProfile() {
  const [user, setUser] = useState({ name: '', age: 0 });

  const handleNameChange = (e) => {
    setUser({ ...user, name: e.target.value });
  };

  const handleAgeChange = (e) => {
    setUser({ ...user, age: Number(e.target.value) });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="이름을 입력하세요"
        value={user.name}
        onChange={handleNameChange}
      />
      <input
        type="number"
        placeholder="나이를 입력하세요"
        value={user.age}
        onChange={handleAgeChange}
      />
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
    </div>
  );
}

여기서 setUser 함수는 상태 객체 전체를 업데이트하므로, 기존 상태를 전개 연산자(spread operator)를 사용해 유지한 후 갱신될 상태만 업데이트합니다.

상태 초기화 하기

useState 훅의 인자로 전달되는 초기 값은 기본값으로 설정됩니다. 하지만 초기 값이 복잡한 계산을 필요로 하는 경우, 초기 상태 설정 함수를 사용할 수 있습니다:

javascript
function calculateInitialCount() {
  return someComplexCalculation();
}

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

  return (
    <div>
      <p>현재 카운트 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

이 방식으로 useState는 컴포넌트가 처음 렌더링 될 때에만 calculateInitialCount 함수를 호출합니다.

상태에 의존적인 값 계산하기

종종 상태 값에 기반하여 다른 값을 계산해야 하는 상황이 있을 수 있습니다. 이때 상태가 갱신될 때마다 계산되는 값을 관리하려면 상태 갱신 함수를 인자로 사용할 수 있습니다:

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

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

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>현재 카운트 값: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

이 예제에서는 setCount 함수에 이전 상태 값인 prevCount를 함수 형태로 전달하여 상태 갱신을 수행합니다. 이는 상태 갱신이 비동기적일 때 발생할 수 있는 경쟁 조건을 방지합니다.

결론

이 글에서는 함수형 컴포넌트에서 상태 관리를 위한 useState 훅을 소개하고, 다양한 예제를 통해 그 사용법을 설명했습니다. useState 훅은 매우 강력하며, 적절히 사용하면 컴포넌트의 복잡성을 줄이고 코드를 더욱 가독성 있게 만들 수 있습니다. 다양한 사례를 통해 useState 훅을 잘 이해하고 적용할 수 있기를 바랍니다.