State: React에서 상태 관리의 기본 개념

리액트에서 state는 컴포넌트의 동적인 데이터를 관리하는 개체이다.

state는 사용자와의 상호작용이나 특정 이벤트에 따라 변할 수 있는 값들을 저장하고, 이를 통해 UI를 업데이트하는 중요한 요소이다.

 

state의 주요 특징

1. 동적 데이터 관리

• state는 사용자가 입력한 값이나 클릭한 버튼 등에 따라 값이 변할 수 있는데이터이다.
• 예를 들어, 좋아요 버튼을 누를 때마다 숫자가 올라가는 상황을 생각해 보면, 이 숫자는 계속 바뀌어야 하는 동적 데이터이므로 state에 저장한다.

2. 컴포넌트 내에서 선언 및 관리

• state는 컴포넌트 내부에서 선언되고, 그 컴포넌트 내에서만 직접 수정이 가능하다.
• 컴포넌트가 생성될 때 state가 초기화되고, 컴포넌트가 다시 렌더링될 때마다 상태 값에 따라 UI가 업데이트 된다.

3. setState로 상태 변경

state값을 직접 수정할 수 없으며, 대신 setState함수를 이용해 업데이트 한다.

setState가 호출되면 리액트는 자동으로 컴포넌트를 다시 렌더링하여 변경된 state값이 UI에 반영되도록 한다.

 

함수형 컴포넌트에서의 state 사용

함수형 컴포넌트에서는 useState훅을 통해 state를 설정한다.

 

state 선언 방법

const [count, setCount] = useState(0); // count는 현재 상태값, setCount는 상태를 업데이트하는 함수

useState는 초기값을 인수로 받아, 배열 형태로 state변수(count)와 이 값을 업데이트하는 함수(setCount)를 반환

 

 

사용예시

import React, { useState } from 'react';

function Counter() {
    // count라는 state 변수를 선언하고, 초기값을 0으로 설정
    const [count, setCount] = useState(0);
    //count는 현재 상태값, setCount는 이 값을 변경할 때 사용하는 함수

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

export default Counter;

 

<button onClick={() => setCount(count + 1)}>

버튼을 클릭할 때 setCount함수를 통해 count값을 count + 1로 업데이트 한다.

이때 리액트는 state가 변경되었음을 감지하고 Count컴포넌트를 다시 렌더링한다.

 

클래스형 컴포넌트에서의 state 사용

this.state와 this.setState를 통해 state를 설정하고 업데이트한다.

 

state 선언방법

this.state = { count: 0 }; // count라는 state 변수를 선언하고 초기값을 0으로 설정

 

사용예시

import React, { Component } from 'react';

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 }; // 초기 상태 설정
    }

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

export default Counter;

 

this.state = { count: 0 };

클래스형 컴포넌트에서는 생성자에서 state를 객체 형태로 선언하고, 초기값을 설정한다.

 

this.setState({ count: this.state.count + 1 })

버튼을 클릭할 때 setState로 state값을 변경한다.

변경된 state에 따라 리액트가 컴포넌트를 다시 렌더링하여 UI가 업데이트 된다.