[React] 상태 (State)

상태란?

리액트(React)에서 state는 컴포넌트의 현재 상태를 나타내며, 사용자 상호작용이나 다른 이벤트에 의해 데이터가 변할 때 UI를 갱신하는 데 사용된다.

state는 컴포넌트 내에서 캡슐화되어 있으며, React의 useState 훅을 사용해 관리된다.

Counter.tsx

import {useState} from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const onIncrease = () => {
        setCount(count + 1);
    }
    const onDecrease = () => {
        setCount(count - 1);
    }
    return (
        // 0에서 출발, 1씩 증가 / 1씩 감소
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

 

App.tsx

import './App.css';
import MyHeader from "./MyHeader.tsx";
import Counter from "./Counter";

function App() {

    return (
        <div>
            <MyHeader/>
            <Counter/> // 추가
        </div>
    );
}

export default App;

App 컴포넌트가 Counter 컴포넌트를 호출하고, 반환받은 html을 화면에 표시한다.

Counter 컴포넌트가 return을 다시해서 화면을 새로 그리는 과정을 Re-render라고 한다.

 

state의 특징

컴포넌트 별 독립성:

각 React 컴포넌트는 자신만의 state를 가질 수 있으며, 이 state는 컴포넌트 내에서 관리되고 독립적으로 동작한다.

 

다중 state 선언

리액트는 여러 개의 state를 하나의 컴포넌트가 가져도 문제가 되지않는다.

하나의 컴포넌트는 여러 개의 state 변수를 가질 수 있으며, 이를 통해 다양한 데이터 조각을 별도로 관리할 수 있다.

 

유연성과 간결성

state는 매우 짧은 코드와 유연한 문법으로 화면에 나타나는 데이터를 쉽게 교체하고 업데이트를 할 수 있다.

useState 훅은 짧은 코드로 state를 선언하고, 값의 업데이트가 필요할 때 간단하게 setState 함수를 호출함으로써 state를 업데이트할 수 있게 해준다.

 

동적 UI 반응성

리액트의 state를 사용하여 사용자의 버튼 클릭 같은 이벤트를 동작들에 반응하여 요소들이 동적으로 바뀌는 웹 사이트를 만들 수 있다.

state의 변화는 컴포넌트의 리렌더링을 유발하며, 이를 통해 UI는 state의 최신 상태를 반영다. 사용자의 클릭, 입력 등의 이벤트에 의해 state가 변경되면, 그에 따라 UI도 동적으로 갱신된다.