React 동적인 값 변경 useState 사용

이벤트가 발생 하면 값이 변경되는 컴포넌트를 구현 할 때

 

리액트에 내장되어 있는 useState 함수를 사용한다.

 

사용방법

1. useState를 import

 

React와 useState를 선언

2. useState를 비구조화 할당

비구조화 할당

useState(0) : 초기 상태값을 default로 0 입력

number : 현재 상태 값

setNumber : setter로 바뀌는 값

 

*number , setNumber =>  test, setTest  처럼 이름이 변경이 가능하다.

 

*사용 예

 

버튼 클릭시 함수로 인해 number이 변경 되는 예

import React, { useState } from 'react';

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

  const upCount = () =>{
    setNumber(number + 1)
  }
  const downCount = () =>{
    setNumber(number - 1)
  }

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

export default Counter;

 

출처 : https://react.vlpt.us/basic/07-useState.html