useState 는 어떤 값을 기억하고 싶을 때 사용했다.

상태의 값을 기억해서 그 값을 갱신하거나 변화를 주는게 가능하다.

hook 은 함수 컴포넌트에서 React state와 생명주기를 연동 할 수 있게 해주는 함수이다.

주의할점은 hook 은 class안에서는 동작하지 않는다. class없이 React를 사용할 수있도록 해주는 것이다.

useState의 대표적인 샘플이 버튼을 클릭하면 숫자가 업데이트 되는것이다.

이는 이전의 숫자의 상태의 값을 기억해 클릭할때 마다 그 값에 변화를 주는 것이다.

React를 처음 공부할때 class를 사용 했었다. 이때는 상태의 값을 변경하고 싶을때

this.state = {count : 0 } 이런 식으로 작성했다. (물론 생성자, super()도 같이 )

class React, constructor, super

자세한건 위의 링크를 통해서 더 작성하도록 한다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState는 인자로 초기 state 값을 받게 된다. 여기서 우리는 숫자가 0 부터 시작할 것임으로 인자를 0으로 세팅한다.