React 개발의 핵심: useState Hook 완전 정복!

React 개발을 시작하거나 기존 지식을 더욱 심화하고 싶으신가요? 그렇다면 함수 컴포넌트의 상태 관리를 혁신적으로 단순화해준 useState Hook에 대해 완벽하게 이해하는 것이 필수입니다. 이 글에서는 useState가 무엇인지부터 기본적인 사용법, 그리고 실용적인 예시와 주의사항까지 상세히 다루어, 여러분이 더욱 강력한 React 애플리케이션을 구축할 수 있도록 돕겠습니다.

useState Hook이란 무엇인가요?

React Hook은 함수 컴포넌트에서 React의 상태 및 생명주기 기능에 "연결"할 수 있도록 해주는 함수입니다. 그중에서도 useState Hook은 함수 컴포넌트에 상태 관리 기능을 추가하는 가장 일반적이고 기본적인 Hook입니다.

클래스 기반 컴포넌트에서 this.state와 this.setState를 통해 상태를 관리하던 방식과 달리, useState는 함수 컴포넌트 내에서 상태 조각을 생성하고 관리할 수 있게 해줍니다. 이는 코드를 훨씬 더 깔끔하고 읽기 쉽게 만들어주며, 로컬 컴포넌트 상태를 효과적으로 관리하는 데 큰 도움을 줍니다.

useState의 반환 값

useState Hook을 호출하면 두 가지 요소를 포함하는 배열을 반환합니다.

1. 상태의 현재 값: 현재 상태를 나타내는 변수입니다.
2. 이 값을 업데이트할 수 있는 함수: 상태를 변경할 때 사용하는 함수입니다.

이 메커니즘을 통해 클래스 컴포넌트 없이도 함수 컴포넌트 내에서 동적인 데이터를 효율적으로 다룰 수 있습니다.

728x90

useState 기본 문법 및 사용법

useState를 사용하기 위해서는 먼저 React에서 이를 import하고, 함수 컴포넌트 내에서 호출해야 합니다.

import React, { useState } from 'react';

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

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

위 예시에서:

• count는 초기값 0으로 설정된 상태 변수입니다.
• setCount 함수는 버튼이 클릭될 때마다 count 값을 1씩 증가시키는 데 사용됩니다.

실용적인 예시: 간단한 카운터 애플리케이션 확장

이제 기본적인 카운터 예시를 확장하여, 카운터를 재설정하거나 감소시키는 등의 더 많은 기능을 추가해 봅시다.

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default EnhancedCounter;

여기서 일어나는 일:

• "Increment" 버튼을 클릭하면 count에 1이 추가됩니다.
• "Decrement" 버튼을 클릭하면 count에서 1이 빼집니다.
• "Reset" 버튼을 클릭하면 count가 0으로 다시 설정됩니다.

각 버튼은 사용자 상호작용에 따라 count 상태를 수정하며, 변경된 상태는 즉시 UI에 반영됩니다.

상태 업데이트 작동 방식: 비동기성 이해하기

setCount와 같은 상태 업데이트 함수를 사용할 때, 상태 업데이트가 비동기적일 수 있다는 점을 알아두는 것이 중요합니다. 이는 setCount(count + 1)와 같이 현재 상태 값에 기반하여 상태를 업데이트하는 경우, 예상치 못한 동작을 야기할 수 있음을 의미합니다.

이전 값에 기반하여 상태를 업데이트해야 할 때는, 다음과 같이 함수를 전달하는 것이 더 좋은 방법입니다.

<button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>

이렇게 하면 prevCount는 항상 count의 최신 버전을 나타내므로, 예측 가능한 방식으로 상태를 업데이트할 수 있습니다.

여러 개의 상태 변수 다루기

단일 컴포넌트 내에서 useState를 여러 번 호출하여 여러 상태 조각을 선언할 수도 있습니다. 이는 관련 없는 상태들을 별도로 관리해야 할 때 유용합니다.

import React, { useState } from 'react';

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

  return (
    <form>
      <input 
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input 
        type="number"
        placeholder="Age"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
    </form>
  );
}

이 경우:

• name과 age 모두에 대한 별도의 상태 조각을 가집니다.
• 각 입력 필드의 변경 사항은 해당 상태를 독립적으로 업데이트합니다.

결론

useState Hook은 함수 컴포넌트에서 로컬 컴포넌트 상태를 관리하는 과정을 놀랍도록 단순화합니다. 이는 클래스 컴포넌트에 비해 더 깔끔하고 간결한 코드를 작성할 수 있게 해주며, React 애플리케이션에서 상호작용적인 UI 요소를 구축하는 데 필수적인 도구입니다.

카운터나 폼과 같은 실제 예시를 통해 useState의 작동 방식을 이해함으로써, 여러분은 React 개발의 강력한 기반을 다질 수 있을 것입니다. 다른 ReactJS Hook과 개념에 대해 계속 학습하면서 useState를 포함하는 다양한 시나리오를 계속 실험해 보세요. 직접 실습하는 것이 이해를 심화하고 진정한 React 전문가로 성장하는 데 가장 큰 도움이 될 것입니다!