ReactJS _ useState()

 

 

React.useState()는 React Hook 중 하나로, 함수형 컴포넌트에서 상태(State)를 관리할 수 있도록 도와줍니다. 이전에는 클래스형 컴포넌트에서만 상태를 관리할 수 있었지만, useState()가 도입됨으로써 함수형 컴포넌트에서도 쉽게 상태를 사용할 수 있게 되었습니다. useState()는 컴포넌트의 랜더링을 트리거하며, 컴포넌트 내의 데이터 변화를 관리하는 핵심적인 도구입니다.

 

 

useState() 함수의 기본 구조

• state : 현재 상태 값
• setState : 상태를 업데이트하는 함수
• initialValue : 상태의 초기값으로 문자열, 숫자, 객체, 배열 등 모든 값이 될 수 있음

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

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

    return (
        <div>
            <h1>Count : {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increase</button>
            <button onClick={() => setCount(count - 1)}>Decrease</button>
        </div>
    );
}

// useState(0) : count의 초기 값을 0으로 설정
// setCount() : count 값을 변경하며, 상태가 변경되면 컴포넌트가 다시 렌더링됨

 

 

useState()의 반환값

useState()는 배열을 반환하며, 배열의 첫번째 요소는 현재 상태 값, 두번째 요소는 상태를 변경하는 함수입니다. 구조 분해 할당을 사용하여 state 와 setState를 각각 변수로 받을 수 있습니다.

const [name, setName] = useState("John");
console.log(name); // John

setName("Lily");
console.log(name); // Lily

 

 

상태 업데이트의 비동기적 특성

setState()는 비동기적으로 동작합니다. 즉, 상태 변경이 즉시 반영되기보다는 React가 렌더링 스케줄에 따라 변경을 처리합니다.

function Sample() {
    const [count, setCount] = React.useState(0);
    const handleClick = () => {
        setCount(count + 1);
        
        // 여기서 출력되는 값은 변경되기 전의 count 값으로 0이 된다.
        console.log(count);
    };

    return <button onClick={handleClick}>Click Me</button>;
}

 

 

상태 업데이트 시 함수형 업데이트 사용하기

setState() 함수에 함수를 인자로 전달하면, 이전 상태를 기반으로 안전하게 새로운 상태를 계산할 수 있습니다.

function Counter() {
    const [count, setCount] = React.useState(0);
    const increment = () => {
        // prevCount는 이전 상태를 의미하며, 이를 사용하여 동시 업데이트 문제를 방지
        setCount(prevCount => prevCount + 1);
    };

    return <button onClick={increment}>Increase</button>;
}

 

 

객체와 배열 상태 관리하기

• useState()를 사용하여 객체와 배열도 상태로 관리할 수 있습니다.
• 객체 상태를 변경할 때는 불변성 유지를 위해 스프레드 연산자(...)를 사용합니다.
• 배열 상태를 변경할 때도 새로운 배열을 반환하여 상태를 변경해야 합니다.

// 객체 상태 관리 예제
const [user, setUser] = React.useState({name: "John", age: 25});
const updateName = () => {
    setUser(prevUser => ({ ...prevUser, name: "Peter"}));
};

// 배열 상태 관리 예제
const [items, setItems] = React.useState([1, 2, 3]);
const addItem = () => {
    setItems(prevItems => [...prevItems, prevItems.length + 1]); // 배열에 새 항목 추가
};

 

 

useState()의 장점과 단점

장점

함수형 컴포넌트에서도 상태 관리 가능 : 클래스형 컴포넌트 없이도 상태 관리가 가능합니다.

간결한 코드 : 기존 클래스형 컴포넌트보다 코드가 간결합니다.

더 직관적인 UI 업데이트 : 함수형 업데이트를 통해 UI를 더욱 직관적으로 변경할 수 있습니다.

 

단점

비동기적 업데이트 : setState가 비동기적으로 처리되기 때문에 업데이트 직후 값을 참조하면 이전 값일 수 있습니다.

복잡한 상태 관리 시 불편함 : 다수의 상태가 있는 경우 useReducer() 같은 Hook이 더 적합할 수 있습니다.

 

 

---

 

 

React.useState()는 함수형 컴포넌트에서 상태를 선언하고 관리하기 위한 주요 Hook입니다. 이를 통해 UI의 상태 변화에 따라 컴포넌트를 다시 렌더링 할 수 있으며, setState() 함수로 값을 업데이트 할 때는 객체나 배열의 불변성을 유지해야 합니다. 비동기적인 특성을 이해하고 함수형 업데이트를 활용하면 보다 효율적으로 상태를 관리할 수 있습니다. React의 다른 Hook들과 함께 사용하면 더 강력한 기능을 구현할 수 있으므로 useState()의 기본을 이해하고 다양한 사례에 활용해보세요.