useState

Hooks

• 리액트 16.8 버전에서 새로 추가된 기능
• 함수형 컴포넌트에서 react state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
• 클래스의 생명주기 메서드를 함수형 컴포넌트에서 사용할 수 있는 것이다.

state

컴포넌트의 상태를 의미한다.

useState

• 리액트 훅의 한 종류로 컴포넌트의 상태를 간편하게 생성하고 업데이트 할 수 있도록 해주는 기능이다.
• 배열을 반환하며 첫번째 요소는 현재 상태값을 나타내는 state, 두번째 요소는 상태값을 업데이트 하는 set함수가 오게 된다.
• state의 작명은 개발자 마음대로 작성 가능하며, set함수는 보통 set상태값명으로 사용하는 편이다.
• setState 함수로 state를 변경할 경우 해당 컴포넌트는 화면에 다시 렌더링 된다.

state 생성과 동시에 useState 함수의 인자로 초기값을 넣을 경우 초기값은 state 변수에 담기게 된다.

const [state, setState] = useState(초기값);

setState의 비동기적 특성

• 버튼 증감 코드

import { useState } from 'react'

const App = () => {

  const [count, setCount] = useState(0);

  const handlePlus = () => {
    setCount(count + 1);
  }

  const handleMinus = () => {
    setCount(count - 1);
  }

  return (
    <>
      <h1>Total Click : {count}</h1>
      <button onClick={handlePlus}>+</button>
      <button onClick={handleMinus}>-</button>
    </>
  )
}

카운트 수는 초기값 0으로 설정되어있는 것을 알 수 있다.

handlePlus 함수에 카운트 수를 증가시켜주는 setCount 함수를 작성함으로써 해당 함수 작동 시 state값이 업데이트 되며 업데이트된 state값을 렌더링 할 수 있는 것이다.

위 코드는 1씩 증가하지만 아래처럼 3씩 증가하도록 해보자

const App = () => {

  const [count, setCount] = useState(0);

  const handlePlus = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  const handleMinus = () => {
    setCount(count - 1);
  }

  return (
    <>
      <h1>Total Click : {count}</h1>
      <button onClick={handlePlus}>+</button>
      <button onClick={handleMinus}>-</button>
    </>
  )
}

setCount 함수를 3번 호출하여 3씩 증가할 것으로 생각했지만 결과는 1씩 증가하였다.

동일한 state를 연속으로 업데이트 할 경우 setState를 하나로 병합하여 최종적으로 한번만 이뤄지게 된다.

마지막 setState만 실행되어 1이 증가되는 것이다.

함수형 업데이트

위와 같은 문제점을 해결하기 위해 함수형 업데이트를 사용할 수 있다.

전달받은 set함수는 큐에 저장되어 순서되로 실행되기 때문에 먼저 수행된 함수 결과로 반영된 state값이 다음 수행할 함수의 인자로 들어가 최신의 state 상태를 유지할 수 있는 것이다.

const App = () => {

  const [count, setCount] = useState(0);

  const handlePlus = () => {
    setCount((prevState) => prevState + 1);
    setCount((prevState) => prevState + 1);
    setCount((prevState) => prevState + 1);
  }

  const handleMinus = () => {
    setCount((prevState) => prevState - 1);
  }

  return (
    <>
      <h1>Total Click : {count}</h1>
      <button onClick={handlePlus}>+</button>
      <button onClick={handleMinus}>-</button>
    </>
  )
}

참고

리액트 훅이란
useState의 함수형 업데이트