2025년의 React vs. Backbone

2 weeks ago 10

2010년대 초의 Backbone과 2025년의 React를 비교하며, 15년간의 프런트엔드 발전이 실제로 얼마나 진전되었는지를 되짚는 논의
React는 겉보기에는 간결하고 현대적이지만, 내부적으로는 복잡한 추상화 계층을 통해 단순함을 가장함
Backbone은 코드가 장황하지만, 이벤트 흐름과 DOM 조작이 명시적이어서 초급 개발자도 동작을 쉽게 추적 가능
React는 상태 관리, 의존성 배열, 클로저 문제 등으로 인해 내부 동작을 이해하지 않으면 디버깅이 어려운 구조
결국 “이벤트 + 상태 = UI”라는 본질을 되새기며, 단순성과 해커블(hackable)한 구조를 갖춘 새로운 모델의 필요성을 제기

하나는 2010년대 프레임워크(Backbone) , 다른 하나는 10년 넘게 발전한 React로 작성된 패스워드 입력창 예시
- 두 코드 구현은 길이도 비슷하고 기능도 동일
- React는 수많은 개발자 시간과 방대한 생태계의 지원을 받았음
- 그러나 저자는 “React가 얼마나 나아졌는가”보다 “얼마나 적게 발전했는가”가 더 흥미롭다고 지적
React는 겉보기 단순성의 환상을 제공하지만, 실제로는 복잡한 추상화로 인해 이해 난이도가 높음
- Backbone은 이벤트 발생 → 핸들러 실행 → HTML 생성 → DOM 삽입이라는 단순한 흐름을 명시적으로 표현
- 반면 React는 내부 동작을 숨기며, 단순 예제를 넘어가면 내부 메커니즘을 이해해야만 해결 가능한 문제가 발생

React는 코드가 깔끔해 보이지만, 이는 명시적 단순성 대신 추상적 복잡성을 택한 결과
- Backbone은 장황하지만 “무슨 일이 언제 일어나는지”를 명확히 보여줌
- 초급 개발자도 코드 흐름을 쉽게 추적 가능
React에서는 내부 상태와 렌더링 로직이 감춰져 있어, 예상치 못한 버그가 자주 발생
- 예: 리스트 항목의 key를 인덱스로 바꾸면 React가 다른 컴포넌트로 인식해 상태를 초기화
- value가 undefined로 바뀌면 비제어 → 제어 컴포넌트 전환으로 입력값이 리셋되는 현상 발생
useEffect 사용 시 무한 루프가 생기는 문제도 흔함
- 의존성 배열에 매 렌더마다 새로 생성되는 객체가 포함되면 React가 변경으로 인식
- 이를 막기 위해 useMemo, useCallback으로 식별 안정화(stabilize identities) 필요
- 과거에는 고려하지 않아도 됐던 개념을 신경 써야 하는 부담 발생
클릭 핸들러가 오래된 상태(stale state) 를 참조하는 문제도 존재
- 함수가 생성 시점의 상태를 캡처하기 때문
- 해결책은 상태를 의존성 배열에 넣거나, setState(x => x + 1) 같은 함수형 업데이트 사용
- 그러나 두 방법 모두 임시방편(workaround) 처럼 느껴짐

이러한 문제들은 예외적 상황이 아니라, 중간 규모 이상의 앱에서 흔히 발생하는 일반적 문제
- 디버깅을 위해서는 재조정 알고리듬(reconciliation algorithm) , 렌더 단계(render phase) , 스케줄러(batch update) 이해가 필요
- React는 “왜 작동하는지 몰라도 작동하는” 구조지만, 문제가 생기면 내부를 알아야만 해결 가능
“React를 진정 이해하려면 직접 만들어봐야 한다”는 말이 있을 정도로 복잡함
- “Build your own React” 같은 튜토리얼이 존재
- 그러나 단순한 비밀번호 검증기를 만들기 위해 가상 DOM, 스케줄링 우선순위, 동시 렌더링을 이해해야 한다는 점은 비판적 시사점
Backbone과 jQuery는 정직하고 해커블한 구조를 가짐
- 소스코드를 직접 보고 수정 가능
- DOM 메서드 기반이라 이해와 확장이 쉬움
- 반면 React의 추상화 계층은 내부 접근과 수정이 어렵게 만듦

결국 React와 Backbone 모두 “이벤트 + 상태 = UI” 라는 동일한 문제를 해결하려는 시도임
대규모 앱에서는 React의 복잡성이 정당화될 수 있으나, 대부분의 중소형 앱에는 과도한 부담임
단순함과 투명성을 갖춘 새로운 UI 모델이 필요함
- DOM처럼 견고하지만 직관적인 시스템
- Backbone이나 jQuery처럼 즉시 이해 가능하고 수정 가능한 구조를 지향