화면이 기억할 값

클릭 횟수나 입력 중인 글은 서버가 아니라 브라우저가 기억한다. useState가 그 기억이다. 값을 바꾸면 React가 그 컴포넌트를 다시 그린다.

'use client'

import { useState } from 'react'

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

  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

useState(0)의 0은 처음 값이다. count는 지금 값, setCount는 바꾸는 함수다. 변수를 그냥 count = count + 1로 고치면 화면은 바뀌지 않는다.

'use client'가 없으면 Next.js는 이 파일을 서버 컴포넌트로 보고 useState를 거절한다. 이유와 경계는 Next.js에서에 있다.

입력은 상태로 연결

입력의 value를 상태에 두면, 화면에 보이는 글과 JavaScript 값이 같다. 이걸 제어 컴포넌트라고 한다.

'use client'

import { useState } from 'react'

export default function TitleField() {
  const [title, setTitle] = useState('')

  return (
    <>
      <label htmlFor="title">제목</label>
      <input
        id="title"
        value={title}
        onChange={(event) => setTitle(event.target.value)}
      />
      <p>입력: {title}</p>
    </>
  )
}

onClick, onChange는 브라우저 이벤트다. 서버에서만 실행되는 컴포넌트에는 넣지 않는다.