[React] useState

useState
함수형 컴포넌트 내부에서 state 값을 관리(변경)을 하기 위해 사용하는 HOOK이다.

다음과 같은 구조로 사용한다.

• 보통 첫번째 배열 요소에 state 요소값을 넣고, 두번째 요소로 state 요소를 설정하는 함수를 넣는다.
• state 설정 함수의 인자로 전달받은 값이 변경할 state값이 된다.

const [state값,state설정 함수] = useState(기본값);

사용예시

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;