<aside> 💡 Counter 컴포넌트를 만들어보자

</aside>

Counter.js

• 해당 모듈을 통해 + or - 하는 카운터 모듈 제작 ( 동작 시킬때마다 실시간으로 return 해서 rerender 됨)

import React, {useState} from 'react'; // import 시켜야

const Counter = () => {

    // 0에서 출발
    // 1씩 증가하고
    // 1씩 감소하는W
    // count 상태

    const [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

App.js

import React from 'react';
// import './App.css';

import MyHeader from './MyHeader';
import Counter from './Counter';

function App() {
  const number = 5;

  return (
    <div>
      <MyHeader />
      <Counter />  // 해당 모듈은 버튼 클릭시마다 화면 표시해야해서 return을 다시함 (rerender) 
    </div>
  );
}

export default App;

+버튼을 막 누르면 해당 함수가 계속 호출됨