Counter 컴포넌트

Counter.js 파일에 다음과 같은 코드를 작성하면 된다.

---

import React, { useState } from 'react';

 

function Counter(){

    const [number, setNumber] = useState(0);

 

    const increase = () =>{

        setNumber(number +1);

    };

    const decrease = () => {

        setNumber(number -1);

    };

---

    return (

        <div>

            {number}

            <button onClick={increase}>+1</button>

            <button onClick={decrease}>-1</button>

        </div>

    )

}

 

export default Counter;

---

하나씩 살펴보자. 

1. useState를 통해 number 변수와 해당 변수의 setter를 한 번에 만들어낸다.

const [number, setNumber] = useState(0);

 

2. 증가함수와 감소함수에서 setNumber를 사용하여 number를 변경하게 한다.

const increase = () =>{ setNumber(number +1);  };

 

3. return 부분에서는 컴포넌트의 UI 부분을 만든다.

return (

  <div>

    {number}

    <button>+1</button>

    <button>-1</button>

  </div>

)

 

4. button에 증가, 감소 함수를 연결한다. 자바스크립트에서 "함수이름"을 쓰는 것과 약간 다른 것을 주의하자.

<button onClick={increase}>

 

이렇게 컴포넌트를 만들고 App.js에서 <Counter></Counter>를 사용하면 다음과 같은 Counter가 보여진다.