what is useState?

useState 는 react Hook에서 state 를 지정할 때 사용되는 hook이다.

class Component의 setState 의 기능과, state object를 혼합해놓은 형태로 이해하면 된다.

형태

function Example() {
const [count, setCount] = useState(0);
...
}

위와 같이 작성하며, count 는 state object의 키값이 되고, first value 값은 useState() 괄호 안에 들어있는 "0"이 된다.
첫 값에서 값이 변할때마다 setCount 에 저장된다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0); // state = {count: 0}

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

위의 예제를 보면 useState 를 사용해 state 를 생성한다. ← 생성 시에 useState도 import가 잘 되어 있는지 확인해야한다.

이 state 의 key 값은 count, value는 0으로 초기 설정되었다.

사용자가 버튼을 클릭하면 setCount 함수를 호출하여 state 를 업데이트 한다. setCount 로 받아낸 count 변수를 (값도 함께 포함하여) Example 함수에 다시 넘겨주며 컴포넌트를 다시 렌더링한다.

같이 공부하면 좋은 것들

• useEffect