[React] useState 사용하기.

useState

useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 React Hook이다.

 

useState는 react로부터 import를 하여 사용할 수 있다.

 

const [상태, 상태변경 함수] = useState(초기값)의 형태로 작성을 하게 된다.

import {useState} from "react"

const [item, setItem] = useState()

const [상태, 상태변경 함수] = useState(초기값)

 

useState 비동기 처리

useState의 setState가 비동기로 작동하기에, 가끔 문제가 있을 수도 있다.

그 때는 useState setState를 함수를 이용한다.

const [item, setItem] = useState()

// 기존
setItem(1)

// 비동기 처리
setItem(() => 1)

---

useState를 사용하여, 카운트 컴포넌트를 제작해보자.

설계도

1. 증가 버튼과 감소 버튼이 있고, 숫자가 있다.
2. 증가 버튼을 누르면 숫자가 1씩 증가
3. 감소 버튼을 누르면 숫자가 1씩 감소

 

 

import { useState } from "react";

export default function Counter() {
  //useState 사용하여, 변수 및 Setter 생성
  const [count, setCount] = useState(0) //count의 기본 값 0

  //현재 값에서 1을 추가
  const increase = () => setCount((current) => current + 1)

  //현재 값에서 1을 추가
  const decrease = () => setCount((current) => current - 1)

  return (
    <div>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <h1>Total : {count}</h1>
    </div>
  )
}