React 기초 02 · useState

useState - 기억하는 상자

화면이 다시 그려져도 값을 기억하는 상자. 한 번 클릭에 +3을 제대로 하려면 왜 함수형 업데이트를 써야 하는지까지.

먼저 비유로

값을 기억하는 사물함이에요

보통 변수는 화면이 다시 그려질 때마다 처음 값으로 초기화돼요. 그런데 useState로 만든 값은 사물함 같아서, 다시 그려져도 넣어둔 값을 그대로 기억해요. 그리고 사물함 값을 바꾸는 열쇠가 setState(여기선 setCount)예요. 이 열쇠로 바꿔야 React가 알아채고 화면을 새로 그려줘요.

즉 useState는 두 개를 줘요. 지금 값과, 그 값을 바꾸는 함수. 우리는 값을 직접 고치지 않고 늘 이 함수로 부탁해요.

직접 해보기

+1, 그리고 한 번에 +3

먼저 +1로 값이 쌓이고 기억되는 걸 보세요. 그다음 아래 한 번 클릭에 +3의 두 버튼을 눌러 비교해 보세요. 같은 +3인데 결과가 다를 거예요.

직접 만져보세요

상자 안 값 (state)0

한 번 클릭에 +3 해보기

잘못된 방식과 올바른 방식을 번갈아 눌러 차이를 확인해 보세요.

핵심은 이거예요

값을 바꿀 땐 항상 setState로 바꾸고, 직전 값을 기준으로 바꿀 땐 setCount(c => c + 1)처럼 함수형으로 쓰세요. 그래야 항상 최신 값에서 출발해요.

흐름으로 보기

왜 +1만 될까?

1setCount는 즉시 반영이 아니라, 한 번의 클릭이 끝날 때 모아서(batch) 처리돼요.
2그래서 setCount(count + 1)를 세 번 써도, 세 번 다 '그 순간의 count'(예: 0)를 봐요.
3셋 다 0 + 1 = 1을 계산하니, 결과는 1. (덮어쓰기처럼)
4setCount(c => c + 1)는 '직전 값 c'를 받아서 더해요. 0 → 1 → 2 → 3 으로 쌓여요.

코드로 보기

딱 이만큼이에요

function Counter() {  // [지금 값, 값을 바꾸는 함수] = useState(처음 값)  const [count, setCount] = useState(0);   return (    <div>      <p>{count}</p>       {/* 직전 값(c)에 +1 - 여러 번 호출해도 차곡차곡 쌓인다 */}      <button onClick={() => setCount((c) => c + 1)}>+1</button>    </div>  );}

useState(0)이 [지금 값, 바꾸는 함수]를 준다. 바꿀 땐 함수형으로.

조심하세요

처음에 꼭 헷갈리는 것

값을 직접 고치기 (예: count++ 또는 count = 5). React가 모르니 화면이 안 바뀌어요. 꼭 setCount로.
바꾼 직후 줄에서 새 값을 기대하기. setCount(1) 바로 다음 줄의 count는 아직 옛날 값이에요. 새 값은 다음 렌더에서 보여요.
직전 값에 기대는 변경인데 함수형을 안 쓰기. +1을 빠르게 여러 번 하거나, 이전 값으로 계산할 땐 setCount(c => ...) 가 안전해요.