상태(State) — 화면이 바뀌는 진짜 이유
Article
지금까지 컴포넌트를 만들고, Props로 데이터를 전달하는 법을 배웠습니다. 그런데 한 가지 빠진 게 있습니다.
화면이 바뀌는 건 어떻게 처리하나요?
버튼을 누르면 숫자가 올라가고, 탭을 클릭하면 내용이 바뀌고, 체크박스를 체크하면 스타일이 변하는 것. 이런 동적인 변화를 만드는 핵심이 바로 **상태(State)**입니다.
상태란
상태는 컴포넌트가 기억하고 있는 데이터입니다. 그리고 이 데이터가 바뀌면 화면이 자동으로 다시 그려집니다.
쉽게 말하면, 상태는 화면에 직접 영향을 주는 변수입니다.
일반 변수와 뭐가 다를까요
JavaScript에서 변수를 선언할 때 보통 let을 씁니다.
function Counter() {
let count = 0;
function handleClick() {
count = count + 1;
console.log(count); // 1, 2, 3... 잘 올라갑니다
}
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>+1</button>
</div>
);
}
버튼을 클릭하면 count 값은 올라갑니다. 콘솔에서 확인할 수 있습니다. 하지만 화면에 보이는 숫자는 0에서 바뀌지 않습니다.
왜 그럴까요? React는 일반 변수가 바뀐 걸 감지하지 못하기 때문입니다. 변수가 바뀌어도 "아, 화면을 다시 그려야겠다"라고 판단하지 않습니다.
상태가 바뀌면 화면이 다시 그려집니다
React에게 "이 값이 바뀌면 화면을 다시 그려줘"라고 알려주려면, 일반 변수 대신 상태를 사용해야 합니다.
상태를 쓰면 이런 흐름이 됩니다.
- 사용자가 버튼을 클릭합니다.
- 상태 값이 바뀝니다.
- React가 변경을 감지합니다.
- 해당 컴포넌트를 다시 그립니다(리렌더링).
- 화면에 새로운 값이 표시됩니다.
이 과정이 자동으로 일어납니다. 개발자가 직접 DOM을 조작할 필요가 없습니다.
카운터로 비유하면
카페에 있는 번호표 기계를 떠올려보세요.
- 일반 변수: 종이에 숫자를 적어놨는데, 버튼을 눌러도 전광판에는 반영이 안 되는 상태입니다.
- 상태(State): 버튼을 누르면 전광판 숫자가 자동으로 바뀌는 기계입니다.
React의 상태는 이 전광판 기계와 같습니다. 값이 바뀌면 화면(전광판)에 자동으로 반영됩니다.
왜 이 개념이 핵심일까요
퍼블리싱에서는 화면을 바꾸려면 JavaScript로 직접 DOM을 조작했습니다.
document.querySelector('.count').textContent = newValue;
React에서는 이렇게 하지 않습니다. 상태만 바꾸면 화면은 React가 알아서 업데이트합니다. 이게 React의 핵심 철학입니다.
"내가 화면을 직접 조작한다" → "상태를 바꾸면 화면은 자동으로 따라온다"
이 사고방식의 전환이 React를 이해하는 가장 중요한 포인트입니다.
정리
- **상태(State)**는 컴포넌트가 기억하는 데이터입니다.
- 상태가 바뀌면 React가 화면을 자동으로 다시 그립니다.
- 일반 변수(
let)로는 화면이 바뀌지 않습니다. - DOM을 직접 조작하는 대신, 상태를 바꾸는 것이 React의 방식입니다.
다음 글에서는 이 상태를 실제로 사용하는 방법, useState를 알아보겠습니다.