상태(state)

핵심 포인트

• 변하는 값은 useState에 보관합니다: const [count, setCount] = useState(0)
• 값을 바꿀 때는 반드시 setCount(다음 값)를 사용합니다
• 값이 바뀌면 React가 자동으로 화면을 다시 그립니다. DOM을 직접 고칠 필요가 없습니다

직접 해 보기

import { useState } from "react"

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <div style={{ padding: 16 }}>
      <p>누른 횟수: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

1. +1을 +10으로 바꿔 보세요
2. −1 버튼을 추가해 보세요 (힌트: setCount(count - 1))
3. 0으로 되돌리는 초기화 버튼을 추가해 보세요 (힌트: setCount(0))

자주 하는 실수