React / useState 로 Count 앱 만들기

useState 사용해서 count 버튼 만들기

import React, { useState } from 'react';

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

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

  const decreasement = () => {
    if (number > 1) {
      setNumber
      (prevNumber => prevNumber - 1)
    }
  else {
    setNumber(0);
  }
  }
  
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={increasement}>+</button>
      <button onClick={decreasement}>-</button>
    </div>
  );
}

export default Count;

값을 업데이트 하는 함수를 파라미터로 넣어주고, 함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용하게 된다. 그래서 setNumber(number + 1) 이 아니라 이렇게 함수형 파라미터로 넣어주어야 한다.