[React] useState를 활용해서 증가버튼, 감소버튼 구현

1. useState 함수 활용법

리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

const [상태 저장 변수명, 상태 변경 변수명] = useState(상태 초기 값);

 

 

2. useState를 활용해서 증가버튼, 감소버튼 구현

count는 상태관리의 현재 상태를 가져올 수 있는 getter변수이고,

setCount는 count 변수의 상태를 관리해주는 setter함수이다.

useState(0)은 초기값을 지정해주는 값으로 초기값을 0으로 설정하였다.

 

증가, 감소를 시키려면 setter 변수인 setCount를 활용해야한다.

import React, { useState } from 'react';

const Test3 = () => {
    const [count, setCount] = useState(0)

    const onUp = () =>{
        setCount(count+1)  // count값을 증가시켜주는 함수
    }

    const onDown = () => {
        setCount(count-1)  // cocunt값을 감소시켜주는 함수
    }

    const onReset = () => {
        setCount(0)		   // count reset시켜주는 함수
    }

    return (
        <div>
            <h1>카운트 : {count}</h1>
            <p>
                <button onClick={onUp}>증가</button>
                <button onClick={onDown}>감소</button>
                <button onClick={onReset}>초기화</button>
            </p>
        </div>
    );
};

export default Test3;

 

버튼의 onClick 이벤트를 걸어줄 때, 함수의 매개변수를 전달하지 않는 형태의 함수를 호출할 때는 반드시 ()를

빼줘야 한다.

만약, ()를 넣어서 호출을 하게되면 클릭을 하지 않아도 바로 함수가 실행되버리는 문제점이 생길 수 있다.