React
이벤트와 useState로 수량 바꾸기
이벤트 함수에서 상태를 갱신하면 React가 다음 화면을 계산합니다.
이럴 때 필요해요
버튼을 한 번 눌러 수량이 0에서 1로 바뀌는 흐름부터 익힙니다.
어떻게 동작하나요?
onClick에는 클릭할 때 실행할 함수를 전달합니다. 함수 호출 결과를 바로 넣으면 클릭하기 전에 실행될 수 있으므로 함수 자체를 전달해야 합니다.
useState(0)는 현재 상태와 갱신 함수를 돌려줍니다. count는 화면에 사용할 수량이고 setCount는 다음 수량을 요청합니다. 일반 지역 변수만 바꾸는 것과 다르게 상태 갱신은 React의 화면 계산을 요청합니다.
아래 버튼은 한 번 클릭할 때 현재 수량보다 하나 큰 값을 요청합니다. 여러 번 연속 호출했을 때의 결과와 배칭은 상태 스냅샷 노트와 장바구니 실습에서 자세히 비교합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>수량 {count}</button>;
}처음 수량 0을 표시하고 클릭 후 수량 1을 표시합니다.
자주 헷갈리는 포인트
- onClick에 setCount를 즉시 호출한 결과를 넣지 않습니다.
- Hook은 컴포넌트 최상위에서 일관되게 호출합니다.
내 말로 설명해 보기
일반 변수 count를 바꾸기만 하면 React가 화면을 다시 계산할까요?
생각할 단서 상태 갱신 요청이 있는 줄과 일반 변수 대입을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 이벤트 함수에서 상태를 갱신하면 React가 다음 화면을 계산합니다.
- 처음 수량 0을 표시하고 클릭 후 수량 1을 표시합니다.
예시 답변
일반 변수 변경만으로 화면 계산을 요청하지는 않습니다. 이 예제에서는 useState의 setCount로 다음 상태를 요청합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.