[React] useState를 통한 동적 상태 관리

 

 

useState는 React의 hooks 중 하나로

해당 예시는 UseSate를 활용하여 간단한 Counter 프로그램 만들기다.

 

먼저 Counter.js 파일을 생성 후 아래와 같이 소스를 작성한다.

 

import React, {useState} from 'react'; // useState 함수 사용

function Counter() {
    const [number, setNumber] = useState(0);
    
    // COunter 컴포넌트 내부에 함수 작성
    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;

각 라인에 대한 설명은 아래 이미지의 주석 참고

작성이 완료 되었으면 App.js에서 Conter를 사용한다.