[React] useState 이용해서 Counter 만들기

+1 버튼을 누르면 1이 더해지고 -1버튼을 누르면 1을 빼는 카운터 만들기

 

useState 연습의 아주 기초내용이므로

먼저 스스로 코드를 작성해 본 후 아래 내용 참고하시면 실력향상에 더욱 효과적 입니다.

 

import React, { useState } from 'react';




const App = () => {

  const [number, setNumber] = useState(0);		//기본값은 0으로 설정했다.
   

  const plus = () => {			//plus 함수에 setNumber로 number를 받아서 +1을 함
    setNumber(number + 1)
  };
  const minus = () => {			//minus 함수에 setNumber로 number를 받아서 -1을 함
    setNumber(number - 1)
  };

  return (

    <div>
      <p>{number}</p>
      <button onClick={plus}>+1</button>		//onClick에 plus함수삽입
      <button onClick={minus}>-1</button>		//onClick에 minus함수삽입
    </div>

  );
}


export default App;

useState 연습의 아주 기초내용이므로