[React] state

---

1.state

state는 컴포넌트 내에서 변경될 수 있는 동적인 데이터를 관리하는 데 사용됩니다.
주로 사용자 입력, 네트워크 요청 결과, 또는 다른 인터랙션에 따라 변경되는 데이터를 저장합니다.

 

 

 

2.클래스 컴포넌트에서 state

초기 상태 설정: constructor 메서드 내에서 this.state를 사용하여 초기 상태를 설정합니다.
상태 변경: 상태를 변경하려면 this.setState 메서드를 사용합니다.

import React, { Component } from 'react';

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

  // 상태를 증가시키는 메서드
  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

 

 

 

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

초기 상태 설정: useState 함수에 초기 상태를 전달합니다.
상태 변경: useState 함수에서 반환된 상태 업데이트 함수를 사용하여 상태를 변경합니다.

import React, { useState } from 'react';

function Counter() {
  // 초기 상태 설정
  const [count, setCount] = useState(0);

  // 상태를 증가시키는 함수
  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;