[TIL #4] React (Hooks) - useState 란?

React 16.8 이전 버전에서는 함수형 컴포넌트에서는 State를 관리할 수 없었다.
하지만 16.8 버전이 나오고 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 State를 관리 할 수 있게 되었는데 🎉 그중 하나가 바로 useState 함수이다.
앞선 포스트에서 useState를 사용한 State 예제를 다뤘었는데 좀 더 자세하게 알아보자!

(예제 코드는 여기서 확인이 가능하다!)

useState() 예제

UseStateTest.js

import React, { useState } from "react";

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

  const Increase = () => {
    setNumber((prev) => prev + 1);
  };
  const Decrease = () => {
    setNumber((prev) => prev - 1);
  };

  return (
    <>
      <h1>현재 값 : {number} </h1>
      <button onClick={Increase}>+</button>
      <button onClick={Decrease}>-</button>
    </>
  );
};

export default UseStateTest;

import React, { useState } from "react";
useState 함수를 import 한다.

const [number, setNumber] = useState(0);
이 코드가 의미 하는 것은 다음과 같다.
const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

const Increase = () => { setNumber((prev) => prev + 1); };
Increase라는 함수는 상태 갱신 함수인 setNumber를 이용하여 파라미터로 전달받은 prev를 1 증가시켜준다.

사실 앞 포스트에서는 setNumber(number+1); 이런식으로 작성했었는데 위의 코드 처럼 작성하면 상태 값 변경을 배치(batch)로 처리한다고 한다.
따라서 위와 같이 setNumber(prev => prev + 1); 형식으로 쓰는것이 안전하다.
참고

UseStateTest.js

import React, { useState } from "react";

const UseStateTest = () => {
  
  const [name, setName] = useState('');
  const onChange = (e) => {
    setName(e.target.value);
  };

  return (
    <>
      <input onChange={onChange} />
      <h1>제 이름은 {name}입니다.</h1>
    </>
  );
};

export default UseStateTest;

useState 함수를 이용해서 한 컴포넌트에 여러개의 State를 생성하는 것도 가능하며 위의 예제 처럼 숫자가 아닌 다른 형태의 값도 State로 생성이 가능하다.