Front-end/React

React - useState : Ragular Counter 만들기

Jace.K 2021. 6. 17. 17:06

- useState function를 호출할때는 onClick={ () => setValue} 에로우function을 꼭 사용해야 한다

( 클릭했을때만 실행되도록 하기 위해서 )

import React, { useState } from 'react';

const UseStateCounter = () => {
  const [value, setValue] = useState(0);
  
  const reset = () => {
    setValue(0);
  }
  return (
    <>
      <section style={{ margin: '4rem 0'}}>
        <h2>ragular counter</h2>
        <h1>{value}</h1>
        <button className='btn' onClick={() => setValue
        (value -1)}>decrease</button>
        <button className='btn' onClick={reset}>reset</button>
        <button className='btn' onClick={() => setValue
        (value + 1)}>increase</button>
      </section>
    </>
  )
};

export default UseStateCounter;