4.state

4. State

State란 상태를 의미하며 React에서 시간의 흐름이나 이벤트의 발생에 따라 데이터를 관리하는 대표적인 방법 중 하나

Counter.jsx


import { useState } from "react"
 
export default function Counter() {
  // count - 상태 값을 관리할 변수(0은 초기값)
  // setCount - count를 업데이트할 수 있는 함수
  const [count, setCount] = useState(0); 
 
  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-1<button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1<button>
    </div>
  )
}

특징

Props와 다르게 자신의 컴포넌트 내에서 관리되는 State는 값 변경 가능
useState() hook으로 관리 중인 state의 값을 변경 시 컴포넌트의 re-rendering이 발생함