State의 중요성과 활용 방법

React State를 알아보자.

Posted May 16, 2024

4 min read

React State란?

React 컴포넌트의 상태는 해당 컴포넌트가 관리하는 데이터를 나타낸다.

상태는 컴포넌트가 렌더링될 때 변할 수 있는 값으로, 사용자의 입력, 네트워크 요청 또는
다른 이벤트에 의해 업데이트될 수 있다.

React에서는 상태를 변경할 때마다 컴포넌트가 다시 렌더링되어 UI가 업데이트된다.

State의 활용

React에서 상태를 관리하는 방법은 크게 두가지가 존재한다.
함수형 컴포넌트에서는 useState 훅을 사용하고, 클래스 기반 컴포넌트에서는 state속성을 사용한다.

! 최신 버전의 React에서는 함수형 컴포넌트와 Hooks를 권장하고 있다.

상태를 사용하여 동적인 데이터를 처리하고 UI를 업데이트할 수 있다.

usetState 훅을 사용한 상태 관리

useState 훅은 함수형 컴포넌트에서 상태를 추가하는 데 사용된다.

이를 사용하면 함수형 컴포넌트도 상태를 가질 수 있게 되어
함수형 및 클래스 기반 컴포넌트간의 차이를 줄일 수 있다.

  
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가버튼</button>
    </div>
  );
}

클래스 컴포넌트에서의 상태 관리

클래스 컴포넌트에서는 state속성을 사용하여 상태를 관리한다.
이 속성은 클래스 내부에서 초기화되고 setState 메서드를 사용하여 업데이트한다.

  
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>증가버튼</button>
      </div>
    );
  }
}