[React] Hook - useState( )

useState()란?

• 가장 기본적인 Hook으로서, 함수형 컴포넌트에서 가변적인 상태를 지니고 있을 수 있도록 해주는 Hook이다.
• 함수형 컴포넌트에서 상태를 관리해야 할 일이 발생하면 사용한다.

useState() 사용법

import React, { useState } from 'react';

const App = () => {
  const [num, setNum] = useState(0);
  return (
    <div>
      <p>현재 카운터 : <b> { num } </b></p>
      <button onClick={ () => setNum(num + 1) }> + </button>
      <button onClick={ () => setNum(num - 1) }> - </button>
    </div>
  )
}

useState를 사용할 때에는 코드의 상단에서 import구문으로 불러온 후 사용해야한다.
import React, { useState } from 'react';

• 설명
  const [변수명, 변수값 수정 함수] = useState(변수 초기값);

const [num, setNum] = useState(0);
위의 문법이 이해가 되지 않는다면 비구조화 할당 (디스트럭처링)을 먼저 배워야 한다. [링크]