리엑트 입문 4 - useState

useState는 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수로 이루어져 있습니다.

숫자를 증가하고, 감소시켜주는 예시를 살펴 보겠습니다.

Counter.js

import React, { useState } from 'react';

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

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

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

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

export default Counter;

참고 자료 : https://react.vlpt.us/basic/07-useState.html