본문 바로가기

Front-end/React

React - useState : Ragular Counter 만들기

- 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;

'Front-end > React' 카테고리의 다른 글

React - useEffect : github user profile 만들기  (0) 2021.06.18
useEffect 란?  (0) 2021.06.17
React - useState 이해하기  (0) 2021.06.17
React - Fragment란?  (0) 2021.06.17
React - Children 사용하기  (0) 2021.06.16