useState를 통해 컴포넌트 값 바꾸기

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만 이후로는 

Hooks 라는 기능을 통해 함수형 컴포넌트에서도 상태를 관리 할수 있게 되었습니다.

버튼을 누르면 숫자가 바뀌는 예제를 만들어 보겠습니다

import React, { useState } from 'react';

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

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

    const onDecrease = () => {
        setNumber(number - 1);
    }

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

React 패키지에서 useState 라는 함수를 호출 합니다.

해당값을 호출하면 배열이 반환됩니다.

첫번째 반환값은 현재상태

두번째 반환값은 Setter 함수입니다.

Setter 함수는 전달 받은 값을 최신 상태로 설정!

onIncrease 버튼과 onDecrease 버튼을 누르면 해당 태그 값이 바뀝니다.