[React] useState

---

1.useState

useState는 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용하는 리액트 훅입니다.
useState를 사용하면 컴포넌트에서 동적인 데이터를 관리하고, 상태가 변경될 때마다 컴포넌트를 다시 렌더링할 수 있습니다.

 

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 count 상태 변수와 상태 업데이트 함수를 선언
  const [count, setCount] = useState(0);

  // 버튼 클릭 핸들러 함수
  const increment = () => {
    // 상태 업데이트 함수 호출
    setCount(count + 1);
  };

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

export default Counter;

 

 

 

 

 

2.  const [count, setCount] = useState(0);

클래스형 컴포넌트의 this.state와 this.setState를 대체하는 역할
첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수입니다.
useState(0)는 초기 상태 값으로 count를 0으로 한다는 의미다.

\