5. useState

함수형 컴포넌트에서 Hooks 기능을 통해 상태를 관리할 수 있음

 

함수형 업데이트

- setNumber를 사용할 때 값을 업데이트 하는 함수를 파라미터로 넣어줌 

- 최적화로 어떤 관련이 있는지 다음 시간에..

Counter.js

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;