[React] useState란?

 

 

React의 useState: 상태 관리의 핵심

개요

React는 사용자 인터페이스를 구축하기 위한 선도적인 JavaScript 라이브러리로, 컴포넌트 기반의 개발을 지원합니다. 이러한 컴포넌트들은 동적인 상태를 효과적으로 관리하기 위해 useState 훅을 제공합니다. 이 훅은 함수형 컴포넌트에서 상태를 추가하고 갱신하는 데 필수적인 역할을 합니다.

useState의 정의

useState는 React에서 상태 변수를 선언할 수 있게 해주는 훅 중 하나입니다. 클래스 컴포넌트의 this.state와 유사하게 동작하지만, 함수형 컴포넌트에서도 상태를 사용할 수 있게 해줍니다.

useState의 상세내용

useState 훅은 배열을 반환하며, 첫 번째 요소는 현재 상태의 값이고, 두 번째 요소는 상태를 갱신하는 함수입니다. 이 훅을 통해 컴포넌트는 동적인 데이터를 효과적으로 관리할 수 있습니다.

간단한 예제

다음은 간단한 카운터 예제입니다. 이를 통해 useState의 기본 사용법을 이해할 수 있습니다.

import React, { useState } from 'react';

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

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

export default Counter;
        

위 코드에서 useState를 사용하여 count 상태를 초기화하고, 버튼을 클릭할 때마다 setCount 함수를 이용해 상태를 갱신하고 화면에 렌더링합니다.

심화 예제: Todo 애플리케이션

더 복잡한 상태를 관리하는 예제로 Todo 애플리케이션을 만들어봅시다.

import React, { useState } from 'react';

function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        setTodos([...todos, newTodo]);
        setNewTodo('');
    };

    return (
        <div>
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>{todo}</li>
                ))}
            </ul>
            <input
                type="text"
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
            />
            <button onClick={addTodo}>추가</button>
        </div>
    );
}

export default TodoApp;
        

위 코드에서는 두 개의 상태 변수(todos와 newTodo)를 사용하여 Todo 리스트를 관리합니다. 입력 필드의 값이 변경될 때마다 setNewTodo 함수를 호출하여 상태를 갱신하고, 추가 버튼을 클릭하면 addTodo 함수를 통해 새로운 Todo를 추가합니다.

마무리

useState 훅은 React 컴포넌트에서 상태를 효과적으로 관리하는 핵심 도구입니다. 간단한 카운터 예제부터 복잡한 Todo 애플리케이션까지, 이 훅을 통해 동적인 데이터를 다양한 형태로 다룰 수 있습니다. React의 상태 관리를 더 깊이 이해하고 다양한 프로젝트에 적용해보세요.