프론트엔드 개발자가 useState로 상태를 국소화하면 공유가 필요해졌을 때 되돌리기 비용이 급증한다

Context

현재 대부분의 프론트엔드 프레임워크는 상태를 국소(Local) 상태로 기본 설정한다. 이로 인해 전역 상태 관리가 번거롭고 비용이 높게 느껴진다. 실제로 프로젝트가 성장하면 처음에 국소 상태로 정의했던 값이 여러 컴포넌트에서 필요해지는 패턴이 반복적으로 발생한다.

Technical Solution

• Context API를 전역 상태 관리에 사용하면 Provider 중첩이 증가하여 성능 이슈가 발생한다
• Context를 세밀하게 분할하면 재렌더링 문제는 해결되지만 관리 복잡도가 상승한다
• Redux Toolkit(RTK)을 프로젝트 초기부터 적용하면 아키텍처 일관성이 유지된다
• RTK는 강력한 아키텍처 제어를 제공하지만 슬라이스 생성 비용이 높아 junior 개발자가 useState로 회귀하는 문제가 발생한다
• Inglorious Web 아키텍처는 전역 상태를 국소 상태처럼 편리하게 사용할 수 있도록 설계하여 이 비대칭성을 해소한다

Impact

Fattutto 프로젝트에서 8개의 중첩 Provider 발생, Tetra Pak 프로젝트에서 30개 이상의 RTK 슬라이스 운영

Key Takeaway

상태를 국소로 유지할 때와 전역으로 전환할 때의 비용 비대칭이 발생하는 구조를 개선해야 한다. 안전한 선택과 쉬운 선택이 일치해야 기술 부채가 감소한다.