상태 관리 useState Hook

React 상태 관리: useState Hook 심층 분석

소개

React 애플리케이션에서 데이터의 변화를 반영하고 사용자 인터페이스를 동적으로 업데이트하는 것은 필수적인 작업입니다. 이를 위해 React는 상태(state)라는 개념을 제공하며, useState Hook은 함수형 컴포넌트에서 상태를 간편하게 관리할 수 있도록 해주는 강력한 도구입니다.

이 글에서는 useState Hook의 기본 개념부터 활용 방법, 그리고 다양한 예시를 통해 상태 관리를 깊이 있게 살펴보겠습니다.

useState Hook이란 무엇인가?

useState Hook은 React 16.8 버전에서 도입된 함수형 컴포넌트 전용 Hook으로, 상태를 선언하고 업데이트하는 간단한 방법을 제공합니다.

• 상태(state): 컴포넌트 내에서 변할 수 있는 데이터를 의미하며, UI를 렌더링하는 데 사용됩니다.
• Hook: 함수형 컴포넌트에서 상태와 같은 기능을 사용할 수 있도록 해주는 함수입니다.

useState Hook 사용법

import { useState } from 'react';

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

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

 

• useState(initialValue): 초기 상태 값을 설정합니다.
• count: 현재 상태 값을 저장하는 변수입니다.
• setCount: 상태 값을 업데이트하는 함수입니다.

위 코드에서 count는 클릭 횟수를 나타내는 상태 변수이며, setCount 함수를 호출하여 count 값을 증가시키면 컴포넌트가 다시 렌더링되면서 UI가 업데이트됩니다.

728x90

useState Hook의 특징

• 간결하고 직관적: 클래스형 컴포넌트의 this.state와 this.setState를 사용하는 것보다 훨씬 간결하고 이해하기 쉽습니다.
• 함수형 컴포넌트 전용: 클래스형 컴포넌트에서는 사용할 수 없습니다.
• 다중 상태: 여러 개의 상태를 관리하기 위해 useState를 여러 번 호출할 수 있습니다.
• 비동기 업데이트: setState를 호출하면 즉시 UI가 업데이트되는 것이 아니라, 다음 렌더링 시점에 반영됩니다.

다양한 예시

1. 입력 값 관리

function InputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>You typed: {inputValue}</p>
    </div>
  );
}

 

2. 토글 버튼

function ToggleButton() {
  const [isToggled, setIsToggled] = useState(false);

  const handleClick = () => {
    setIsToggled(!isToggled);
  };

  return (
    <button onClick={handleClick}>
      {isToggled ? 'Toggle off' : 'Toggle on'}
    </button>
  );
}

 

useState Hook 활용 시 주의 사항

• 불변성: 상태 값을 직접 수정하지 않고, 새로운 값을 만들어서 setCount 함수에 전달해야 합니다.
• 비동기 업데이트: setState를 호출한 후 바로 상태 값이 변경되는 것은 아니라는 것을 기억해야 합니다.
• 다중 상태: 여러 개의 상태를 관리할 때는 각 상태를 별도의 useState로 관리하는 것이 좋습니다.

결론

useState Hook은 React에서 상태를 관리하는 가장 간단하고 효과적인 방법입니다. 함수형 컴포넌트를 사용하여 React 애플리케이션을 개발할 때 필수적으로 알아두어야 할 개념입니다.

추가적으로 알아보기

• useEffect Hook: 부수 효과를 관리하는 Hook
• useContext Hook: 컨텍스트 API를 사용하여 데이터를 공유하는 Hook
• 커스텀 Hook: 재사용 가능한 Hook 만들기