상태

컴포넌트의 생명주기 동안 변경될 수 있는 동적 데이터를 의미하며, 이 데이터가 변경되면 UI가 자동으로 다시 렌더링된다.

— 모던 프론트엔드 상태 아키텍처 가이드 명세

"모든 값을 상태로 만들지 마라. 불필요하게 낭비되는 리렌더링 계산서가 니 월급에서 차감될 수도 있다." ~~단순히 팝업창 하나 열고 닫는 스위치인데 전역 레벨에 올리는 과잉 엔지니어링이 판을 친다.~~

1. 개요

프론트엔드 어플리케이션에서 화면에 표시될 UI의 거동을 결정하는 동적인 데이터 덩어리다. 영문 명칭은 State. 모던 웹 프레임워크는 데이터(상태)가 바뀌면 그것을 감지해 화면(컴포넌트)을 자동으로 새로 그려주는 반응형/선언형 구조를 띤다.(...)

2. 전역 상태 관리 라이브러리의 춘추전국시대 잔혹사

자식 컴포넌트 간에 데이터를 공유하려면 부모의 고래 싸움에 등 터지는 배달 노가다(Props Drilling)를 해야만 했다. 이 고통을 면하고자 화면 전체를 관통하는 신의 장부, 즉 전역 상태 관리(Global State Management) 개념이 탄생했다. 한때 페이스북의 Flux 아키텍처를 구현한 Redux가 왕좌를 차지했으나, 사소한 기능 하나 넣으려고 액션, 디스패치, 리듀서 등 보일러플레이트 코드를 수십 줄 갈아 넣어야 하는 노가다 생산성에 지친 개발자들이 폭동을 일으켰다. 이후 Recoil, Zustand, Jotai, MobX, 그리고 서버 데이터를 상태로 관리해 주는 React Query까지 가세하며 매년 뉴 메타 라이브러리가 쏟아져 나와 주니어들의 대가리를 깨부수는 잔혹사를 이어가고 있다.¹

3. 관련 밈 및 드립

3.1. 무한 리렌더링 감옥

컴포넌트가 렌더링 될 때 특정 상태를 업데이트하도록 코드를 짰는데, 그 상태가 바뀌었으니 브라우저가 다시 리렌더링을 때리고, 리렌더링이 되니 또 상태를 바꾸는 악마의 뫼비우스의 띠에 갇히는 현상이다. 이 버그가 터지면 개발자 컴퓨터의 쿨러 펜이 비행기 이륙하는 소리를 내며 돌기 시작하고, 크롬 브라우저가 '페이지가 응답하지 않습니다'라며 하얗게 질려 쓰러지는 촌극을 감상할 수 있다.

3.2. 상태 관리 라이브러리 포비아

이력서에 'Redux, Recoil, Zustand 마스터'라고 적어놓은 면접자를 향해, 시니어 면접관이 '그럼 Context API랑 얘네들의 내부 동작 원리 차이점이 뭐죠?'라고 뼈를 때리는 순간 뇌가 무상태(Stateless)가 되어 침묵을 지키는 슬픈 풍자 밈이다. 도구의 사용법만 달달 외우고 정작 자바스크립트 참조 무결성이나 메모리 구조를 몰라 털리는 애환을 나타낸다.

4. 여담

단방향 데이터 흐름: 모던 프론트엔드 프레임워크의 대원칙은 데이터는 위에서 아래로만 흐른다는 것이다. 역류를 허용하는 순간 디버깅이라는 이름의 지옥문이 개방된다.
상태와 변수의 차이: 일반 자바스크립트 변수(let a = 1)는 백날 천날 값을 바꿔봤자 화면이 꿈쩍도 안 한다. 상태로 지정된 변수여야만 브라우저가 '어? 바뀌었네?' 하고 눈치를 채며 화면을 갱신해 준다.
서버 상태의 분리: 과거엔 서버에서 받아온 데이터(회원 목록 등)도 로컬 상태 저장소에 억지로 꾸역꾸역 집어넣었으나, 최근에는 TanStack Query(React Query)의 등장으로 서버 데이터는 캐싱 시스템에 전권 위임하고 진짜 클라이언트의 순수 UI 상태만 전역 저장소에 남기는 미니멀리즘이 대세다.

5. 관련 문서

실제로 이 유행을 무지성으로 따라가다가 6개월 전에 짠 리액트 프로젝트의 라이브러리가 감고(Deprecated) 상태가 되어 빌드가 터지는 처량한 꼴을 겪게 된다.(...) ↩

상태