프런트엔드 애플리케이션에서 state란 무엇인가요?

Question

Accepted Answer

**State**는 **시간이 지남에 따라 변할 수 있는** 데이터이자, UI가 렌더링을 위해 의존하는 데이터입니다. state가 변경되면 UI도 이를 반영하도록 갱신됩니다. 즉, 특정 시점에서 애플리케이션이 가진 "기억"이라고 할 수 있습니다. ## state의 예시 ```text ✓ 카운터 값, 폼 입력 텍스트, 토글(on/off) ✓ 모달이 열려 있는지 여부, 활성 탭, 로딩/에러 플래그 ✓ 로그인한 사용자, 장바구니 항목, 가져온 API 데이터 ✓ 현재 테마(다크/라이트), 선택된 필터 ``` ## state가 UI를 결정합니다 ```jsx function Counter() { const [count, setCount] = useState(0); // `count`가 state입니다 return ( ); } ``` 현대 프레임워크의 핵심 아이디어는 **UI = f(state)** 입니다. DOM을 직접 갱신하는 것이 아니라, state를 변경하면 프레임워크가 이에 맞춰 UI를 다시 렌더링합니다. 버튼 클릭 → `count` 변경 → 표시되는 숫자가 자동으로 갱신됩니다. ## state와 다른 데이터의 차이 ```text State: 시간이 지나며 변함, 리렌더링을 유발(count, user, isOpen) Constants: 절대 변하지 않음(PI, 설정 URL) — state가 아님 Derived: state로부터 계산됨(firstName + lastName으로 만든 fullName) — 별도로 저장하지 말 것 ``` 모든 변수가 state는 아닙니다. 오직 변하면서 *동시에* 렌더링 결과에 영향을 주는 데이터만 state입니다. 기존 state로부터 계산할 수 있는 값은 별도의 state로 저장해서는 안 됩니다(서로 어긋날 위험이 있습니다). ## state의 분류 ```text Local/UI state → 하나의 컴포넌트에 속함(입력 텍스트, isOpen) Global state → 앱 전역에서 공유됨(user, theme, cart) Server state → API에서 가져온 데이터(원격 데이터의 캐시) URL state → 주소창에 담긴 값(필터, 페이지 번호) ``` ## 왜 중요한가 state를 "변하면서 UI를 결정하는 데이터"로 이해하는 것은 모든 프런트엔드 개발의 기초입니다. **UI = f(state)** 라는 멘탈 모델은 React/Vue/Angular가 어떻게 동작하는지를 설명합니다. 즉, 여러분은 state를 관리하고 뷰는 그것을 따라갑니다. 무엇이 state이고 무엇이 아닌지 구별하는 것(그리고 계산 가능한 값을 중복으로 저장하지 않는 것)은 state를 잘 관리하기 위한 첫걸음입니다. state management의 모든 내용이 이 개념 위에 쌓입니다.