[JavaScript] React - useState

React

useState 사용한 동적 상태

컴포넌트에서 보여줘야하는 내용이 사용자 인터렉션에 따라 바뀌어야 할때, useState를 사용할 수 있습니다.

아래의 코드를 사용하여 버튼을 누를때마다 숫자가 증가하려면 어떻게 해야될까요?

import React from 'react'			//<Counter.js>

function Counter() {
  return (
    <div>
      <h2> 0 </h2>
      <button>+1</button>
      <button>-1</button>
    </div>
    )
}
export default Counter

import React from 'react'			//<App.js>
import Counter from './Counter'

function App() {
  return (
    <Counter />
    )
}
export default App

해당 코드를 useState를 사용하여 동적인 상태로 만들어 봅시다!

import React, {useState} from 'react'			//<Counter.js>
	    // useState를 사용하기 위해 import
function Counter() {
  						//preNum : 이전 값
  					        //changeNum : 이후 값
  const [number, changeNum] = useState(0)       //useState의 파라미터는 초기값
  
  //const numState = useState(0)	위의 함수를 풀어쓰면 이렇게 됩니다!
  //const num = numberState[0]		
  //const changeNum = numberState[1]
  
function numIncrease() {
    changeNum(number + 1)	//() 안에 함수가 들어갈 수 있습니다!
  }
function numDecrease() {
    changeNum(number - 1)
  }
 
  return (
    <div>
      <h2> {number} </h2>	     //위에 작성한 자바스크립트의 number를 출력
      <button onClick={numIncrease}>+1</button>
      <button onClick={numDecrease}>-1</button>
    </div>
    )
}
export default Counter