4.useState

리액트에는 Hooks라는 기능이 있다. 이 Hooks를 통해 함수형 컴포넌트에서 상태(state)를 관리할 수 있다.

<Counter.js>

​

import React from 'react'
​
function Counter() {
  return (
    <div>
        <h1>0</h1>
        <button>+</button>
        <button>-</button>
    </div>
  )
}
​
export default Counter

​
이런식으로 Counter 컴포넌트를 작성한 후 App.js에 작성해준다.
​
이후 Button에 onClick이벤트를 발생시켜보겠다
​
<Counter.js>
​

import React from 'react'
​
function Counter() {
    const onIncrease=()=>{
        console.log("plus");
    }
    const onDecrease=()=>{
        console.log("minus");
    }
  return (
    <div>
        <h1>0</h1>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
    </div>
  )
}
​
export default Counter

​
이런식으로 각 버튼을 클릭할 때마다 "plus" "minus"라는 문구가 출력된다.
​
버튼에 onClick 이벤트를 설정해주었으니, 동적인 값을 넣어주겠다.
​

<Counter.js>

​

import React,{useState} from 'react'
​
function Counter() {
​
    const [num,setNum]=useState(0)
​
    const onIncrease=()=>{
        setNum(num+1);
    }
    const onDecrease=()=>{
        setNum(num-1);
    }
​
    
  return (
    <div>
        <h1>{num}</h1>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
    </div>
  )
}
​
export default Counter

​
useState라는 Hooks를 사용하기 위해서는 상단에 useState를 import 시켜주어야 한다.
​
useState의 구성이 어떻게 되어있냐면
​

const [변수,변수를 변경할 함수] = useState(초기값);

​
이러한 구성으로 되어있다.
​
따라서 위 코드는 [num,setNum]으로 구성되있고 useState(0)이기 떄문에
​
num의 초기값은 0이며 버튼 클릭시 setNum(num+1)을 통해 num의 값을 변화시켜주는 역할을 하게 된다.