useState

react 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 그런데 react 16.8부터 hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

useState 함수를 통해 상태를 관리하는 방법을 알아볼 것이다.
이 useState가 hooks중 하나이다.

카운터 프로그램을 예시
버튼에 클릭 이벤트가 발생했을 때 특정 함수가 호출되도록 설정해본다

import React, { useState } from "react";

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

  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

해당 버튼이 클릭될 경우 클릭이벤트가 발생하고, 그 이벤트에 대한 처리를 해주는 것이 각각 onIncrease와 onDecrease임
따라서, 우리는 이 이벤트핸들러인 onIncrease와 onDecrease에서 state를 변경한다면, 그를 통해 REACT는 리렌더링을 진행하게 되고, 이것은 동적인 상태 관리가 가능해진다는 것을 의미
실제 결과값은 위와 같고 +1을 누를 경우, 숫자가 1씩 증가하고, -1을 누를 경우는 1씩 감소함

여기서 주의할 점이 하나 있는데, useState를 사용할 경우, 배열이 반환되는데, 비구조화 할당, 즉 디스럭쳐링을 통해, 바뀌는 상태값과, 상태값을 바꾸는 함수가 반환이 된다.

const [number, setNumber] = useState(0);

여기서 number는 상태값이고,
setNumber는 number를 바뀌게 만드는(업데이트하는) 함수고,
useState(0)는 동적인 상태관리를 사용하겠다는 것을 의미함과 동시에 초기값으로 0을 준다는 것을 뜻한다.

함수형 업데이트

setNumber 함수에는 위에 처럼, ()안에 그냥 바뀌는 값을 넣어줄 수도 있지만, 다른 방식으로는 함수형 업데이트를 넣어줄 수도 있다.

const onIncrease = () => {
  setNumber(prevNumber => prevNumber + 1);
};

기존에 number + 1이라고 하면, 상태 number를 참조해서 1 더한 값을 넣지만, 값을 업데이트하는 함수를 넣을 수도 있다.
나중에 리액트 컴포넌트를 최적화할 때 업데이트 함수가 필요하다고 함