useState

useState는 React의 기본 Hook 중 하나로, 컴포넌트의 상태를 관리하는 데 사용됩니다. 상태란 컴포넌트 내에서 변경될 수 있는 데이터를 의미하며, UI를 동적으로 업데이트할 때 사용됩니다.

useState의 기본 문법

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

1. state: 현재 상태의 값으로, 컴포넌트 렌더링 시 보여질 데이터입니다.
2. setState: 상태를 변경하는 함수로, 이를 호출하면 React가 해당 컴포넌트를 다시 렌더링합니다.
3. initialValue: 상태의 초기값을 설정합니다.

간단한 예제

import React, { useState } from "react";

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

    const increment = () => {
        setCount(count + 1); // 상태 값 증가
    };

    const decrement = () => {
        setCount(count - 1); // 상태 값 감소
    };

    return (
        <div>
            <h1>카운터: {count}</h1>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
    );
}

export default Counter;

코드 동작

1. 초기값 설정: useState(0)은 count의 초기값을 0으로 설정합니다.
2. 상태 변경: 버튼을 클릭하면 setCount를 호출하여 count 값을 변경합니다.
3. UI 업데이트: 상태가 변경되면 React가 컴포넌트를 다시 렌더링하여 화면에 새로운 값을 보여줍니다.

useState의 특징

1. 상태 불변성: React에서는 상태를 직접 수정하지 않고 setState를 통해 업데이트해야 합니다. 예를 들어, 아래와 같이 상태를 직접 변경하면 안 됩니다:대신 setState를 사용해야 합니다:

2. setCount(count + 1); // 올바른 상태 업데이트
   

3.  

   // 잘못된 상태 업데이트
   count = count + 1; // React는 변경 사항을 감지하지 못함
   

4. 비동기적 상태 업데이트: setState는 비동기로 작동하며, 호출 후 즉시 상태가 업데이트되지 않을 수 있습니다. 따라서 상태가 업데이트된 이후의 값을 사용하려면 주의해야 합니다.

상태에 객체나 배열 사용

useState는 숫자뿐만 아니라 객체나 배열도 상태로 관리할 수 있습니다.

객체 상태 관리

function UserProfile() {
    const [user, setUser] = useState({ name: "홍길동", age: 30 });

    const updateName = () => {
        setUser({ ...user, name: "김철수" }); // 기존 상태를 복사하고 변경
    };

    return (
        <div>
            <h1>이름: {user.name}</h1>
            <h2>나이: {user.age}</h2>
            <button onClick={updateName}>이름 변경</button>
        </div>
    );
}

배열 상태 관리

function TodoList() {
    const [todos, setTodos] = useState(["React 공부", "운동하기"]);

    const addTodo = () => {
        setTodos([...todos, "새로운 할 일"]); // 기존 배열 복사 후 새로운 요소 추가
    };

    return (
        <div>
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>{todo}</li>
                ))}
            </ul>
            <button onClick={addTodo}>할 일 추가</button>
        </div>
    );
}

useState의 한계

• 복잡한 상태 관리가 필요할 경우 useReducer를 사용하는 것이 더 적합할 수 있습니다.
• 여러 상태가 얽혀있거나 깊은 중첩 구조를 가진 상태는 관리가 어려울 수 있습니다.