useState

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

클래스 컴포넌트에서는 this.state, this.setState를 썼지만, 이제 함수형 컴포넌트도 상태를 쓸 수 있게 됐다.

왜 필요할까?

웹 페이지는 사용자가 버튼을 누르거나 입력하면 화면이 바뀌어야 한다.

예를 들어, 카운터 숫자가 올라가거나 댓글이 추가되는 것처럼.

이런 변하는 데이터를 상태(state)라고 부르고, 상태가 바뀌면 화면도 다시 그려져야 한다.

함수형 컴포넌트는 원래 상태가 없었다.

그래서 useState라는 훅이 나와서 함수형 컴포넌트도 상태를 선언하고 사용할 수 있게 됐다.

어떻게 쓸까?

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}

useState(0)으로 count 상태를 0으로 초기화한다. setCount는 count의 상태를 바꾸는 함수이고,

버튼을 누르면 increment가 실행되고 count가 1씩 올라간다. 화면도 자동으로 다시 렌더링돼 최신 값이 보여진다.