React의 상태(State)

React에서 상태(state)란 컴포넌트 내부에서 관리되는 데이터를 의미한다. 이 상태값은 사용자의 입력, API 응답 등으로 인해 시간에 따라 변할 수 있는 값이다. 상태는 컴포넌트의 렌더링 결과를 결정하는 요소 중 하나로, 상태가 변경되면 컴포넌트는 재렌더링된다.

useState 훅

React의 함수형 컴포넌트에서 상태를 관리하기 위해서는 useState 훅을 사용합니다. useState는 상태변수와 그 상태를 변경하는 함수(setter)를 반환합니다.

import React, { **useState** } from 'react';

// ⭐⭐useState는 컴포넌트의 상태값을 관리하며 이 상태값은 렌더링에 영향을 미침
  /*
    - useState훅의 **리턴값은 배열**이며
    - **첫번째** 요소는 관리할 상태값의 **초기값**
    - **두번째** 요소는 해당 상태값을 **변경할 때 사용하는 setter 함수**
  */
function MyComponent() {
    const [myState, setMyState] = useState(initialState);

    // 사용 예
    setMyState(newValue);
}

위 코드에서 useState는 인자로 초기 상태값을 받고, 배열을 반환합니다. 이 배열의 첫 번째 요소는 상태변수이며, 두 번째 요소는 상태를 변경하는 함수입니다.

📌📌 상태 변경시 새로운 객체나 배열을 꼭 setter에 전달하여 변한 값을 세팅해줘야 한다.

useState를 사용한 클릭 이벤트 처리 예시

React의 useState 훅을 사용하여 클릭 이벤트를 처리하고 동적으로 렌더링하는 간단하게 버튼을 클릭하면 클릭 횟수를 표시하는 컴포넌트를 만드는 예제이다.

import React, { useState } from 'react';

function ClickCounter() {
    const [count, **setCount**] = **useState(0)**; // 클릭 카운터의 **초기값**을 0으로 설정합니다.

    const **handleClick** = () => {  // 클릭 이벤트 핸들러 함수를 정의합니다.
        **setCount(count + 1)**; // 클릭할 때마다 카운터를 1씩 증가시킵니다.
    }

    return (
        <div>
            <button **onClick={handleClick}**>Click me!</button>
            <p>You clicked **{count}** times</p>
        </div>
    );
}

export default ClickCounter;

여러개의 상태값 관리