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;