[React] useState 사용법

useState는 리액트 훅에서 사용하는 함수다.

형태는 아래와 같다.

const [state 변수, state 값 갱신 함수] = useState(state 초기 값);

이는 구조분해할당의 일환이다. 

구조분해할당은 객체나 배열을 변수로 분해시킬 수 있는 문법이다.

 

예시)

import React, { useState } from 'react';

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

    return (
      <div>
        <p>{count}번 클릭했습니다!</p>
        <button onClick={() => setCount(count + 1)}>
         Counter
        </button>
      </div>
    );
  }

초기 변수의 값을 useState의 인자를 통해 0으로 만들어준다.

그리고 Counter버튼을 눌러 onClick 이벤트를 실행시키면 setCount의 초기 변수에 1을 더하는 함수가 실행돼서 count는 1이 더한 수로 갱신된다.

또한, 함수형 컴포넌트가 아닌 클래스형 컴포넌트였으면 count도 this.count 식으로 적었을 것을 함수형 컴포넌트 이기 때문에 짧게 적을 수 있게 된다.

---

참고:

ko.reactjs.org/docs/hooks-state.html