컴포넌트 상태 관리를 위해 사용되는 기본 제공 훅

사용

import문 추가(보통 자동으로 추가됨)

import { useState } from "react";

useState()훅의 반환값을 구조분해할당하여 state값과 setter선언

const [input, setInput] = useState(''); // 훅의 인자로 초기값을 전달해야 함

state가 업데이트되면, React가 자동으로 해당 요소와 그 자식 요소들을 리렌더링함

이때 변경된 상태값은 즉시 업데이트되지 않고, 렌더링 사이클이 끝나기 전까지 지연됐다가 다음 사이클부터 반영됨 (Batch Update)

const [input, setInput] = useState("안녕하세요.");

setInput("반갑습니다.");

console.log(input); // 상태 즉시 반영 안 됨 -> "안녕하세요." 출력