본격 카운트 증가시켜보기

같이 손으로 눌러봅시다

이전 문서에서 프로젝트를 만들었다면, 이제 진짜로 버튼을 눌러보는 시간입니다.
개념보다 먼저 감각을 잡아보겠습니다.

먼저 프로젝트를 실행해 주세요.

pnpm dev

브라우저에서 로컬 주소를 열고 count is 0 버튼을 여러 번 눌러봅시다.
누를 때마다 숫자가 1, 2, 3으로 올라가는 걸 확인하면 성공입니다.

이제 코드를 같이 봅시다

src/App.tsx를 열면 function App() 안에 아래 코드가 있습니다.

const [count, setCount] = useState(0)

<button onClick={() => setCount((count) => count + 1)}>
  count is {count}
</button>

• useState(0): count라는 상태를 만들고 초기값을 0으로 둡니다.
• setCount(...): 상태를 변경하라고 React에게 요청합니다.
• count is {count}: 현재 상태값을 화면에 보여줍니다.

간단히 보면, 버튼 클릭 → setCount 호출 → 상태 변경 → 화면 숫자 갱신 순서입니다.

클릭 한 번에 내부에서 벌어지는 일

버튼을 한 번 누르면, React는 아래 순서로 움직입니다.

1. 상태 변경: 우리가 setCount를 호출해서 "count 값을 바꿔주세요"라고 요청합니다.

2. 렌더 단계: React는 이 요청을 받아 새로운 count 값을 기준으로, 화면이 어떻게 달라져야 하는지 계산합니다.

3. 커밋 단계: 렌더 단계에서 만든 결과를 실제 브라우저 화면(DOM)에 반영합니다.

클릭 → 상태 변경 → 렌더 단계 → 커밋 단계 → 화면 숫자 갱신.

우리가 DOM을 직접 만지는 게 아니라, 상태를 바꾸면 React가 렌더와 커밋을 순서대로 처리해 준다는 점이 핵심입니다.

직접 해보기

• 카운터 버튼 직접 만들어보기

다음 챕터 예고

지금은 "버튼 누르면 숫자가 바뀐다"까지 감으로 잡았습니다.
다음 챕터에서는 이 핵심 개념인 state가 정확히 뭔지, 왜 이렇게 중요한지 알아보겠습니다.

• 다음 문서: 상태가 바뀌면 화면이 바뀐다