Not useState

export default function Hello() {
  let name = 'hackjoong'
  function changeName() {
    name = name === 'hackjoong' ? 'joong' : 'hackjoong'
  }

  return (
    <div>
      <h1>state</h1>
      <h2>{name}</h2>
      <button onClick={changeName}>Change Name</button>
    </div>
  )
}

• 버튼을 클릭해도 바뀌지 않음

useState

import { useState } from 'react'

export default function Hello() {
  const [name, setName] = useState('hackjoong')

  function changeName() {
    setName(name === 'hackjoong' ? 'joong' : 'hackjoong')
  }

  return (
    <div>
      <h1>state</h1>
      <h2>{name}</h2>
      <button onClick={changeName}>Change Name</button>
    </div>
  )
}