새로운 타입스크립트(TypeScript) 프레임워크인 폴드킷(Foldkit)이 웹 개발 커뮤니티에 흥미로운 비교 자료를 제시했습니다. 엘름 아키텍처(Elm Architecture)에서 영감을 받아 이펙트(Effect) 위에 구축된 폴드킷은 리액트(React)와 동일한 픽셀 아트 에디터를 구현한 후, 두 프레임워크의 개발 및 유지보수 경험을 나란히 비교했습니다. 단순히 벤치마크나 단편적인 예시가 아닌, 실제 복잡한 애플리케이션을 통해 아키텍처의 차이를 보여주려는 시도입니다.
비교에 사용된 픽셀 아트 에디터는 실행 취소/다시 실행 스택, 세 가지 도구와 미러 모드, 채우기 기능, 로컬 저장소(localStorage) 영속성, PNG 내보내기, 키보드 단축키 등 다양한 기능을 포함한 비(非)사소한(non-trivial) 애플리케이션입니다. 리액트 버전은 `useReducer`, 헤드리스 UI(Headless UI), 타입스크립트, 테일윈드(Tailwind), 메모이제이션(memoization), 커스텀 훅(custom hooks) 등 프로덕션 환경에서 사용되는 최적의 관행을 적용하여 개발되었습니다. 폴드킷 개발자는 리액트에 모든 이점을 부여했음에도 불구하고, 폴드킷이 상태의 위치, 변경 방식, 테스트 가능성 등에서 리액트가 제공할 수 없는 구조적 보장을 제공한다고 강조합니다.
폴드킷의 핵심은 '메시지 유니온(Message union)'과 '업데이트 함수(update function)'입니다. 애플리케이션의 모든 상태 변경은 `Message` 유니온에 정의된 27가지 메시지 중 하나를 통해서만 발생하며, 이 메시지들은 `update` 함수에서만 처리됩니다. 이는 새로운 개발자가 코드베이스를 처음 접했을 때, 상태가 변경될 수 있는 모든 경우의 수를 한눈에 파악할 수 있게 해줍니다. 반면 리액트의 `Action` 타입은 유사한 역할을 하지만, `useReducer` 외부의 `useState`나 다른 상태 관리 라이브러리, 커스텀 훅 등으로 인해 상태 변경의 전체 표면적(surface area)을 파악하기 어렵다는 것이 폴드킷 측의 주장입니다. 이러한 구조적 명확성은 코드베이스가 실제 기능 추가, 버그 수정, 팀원 온보딩 등 장기적인 유지보수 과정에서 큰 이점으로 작용할 수 있습니다.