맹목적인 리액트 도입, 과연 최선일까? 42
현대 웹 개발에서 React는 의심의 여지 없는 1위 기술입니다. 하지만 모든 웹사이트를 만들 때 React를 기본값으로 사용하는 관행에 대해, 최근 전문가들 사이에서 "단순한 웹사이트에는 너무 과한 기술(오버엔지니어링)"이라는 비판이 커지고 있습니다. 우리가 React를 사용하는 '진짜' 이유는 무엇일까요? 그리고 화려한 수식어 뒤에 가려진 단점은 무엇일까요?
우리가 React를 쓰는 '진짜' 3가지 이유
개발자들이 React를 떠나지 못하는 본질적인 이유는 복잡한 내부 기술이 아닙니다. 바로 다음 세 가지 핵심적인 편리함 때문입니다.
- 컴포넌트화: 화면을 버튼, 메뉴 등 독립적인 블록으로 쪼개서 레고처럼 재사용할 수 있습니다.
- HTML in JS (JSX): 자바스크립트 코드 안에서 HTML을 직관적으로 작성할 수 있어 코딩이 아주 편해집니다.
- 반응성(Reactivity): 데이터가 바뀌면 개발자가 일일이 지시하지 않아도 화면이 알아서 업데이트됩니다.
솔직히 말해, 이 세 가지 장점을 제외한 다른 부수적인 기능들은 일반적인 웹 개발에서 없어도 무방할 정도로 이 세 가지의 비중이 절대적입니다.
가상 돔(Virtual DOM)의 신화와 진실
React의 가장 큰 자랑거리 중 하나는 "가상 돔(Virtual DOM)이 실제 DOM(화면)을 직접 바꾸는 것보다 빠르다"는 것입니다. 하지만 이는 과장된 신화에 가깝습니다. 가상 돔은 개발자가 코드를 편하게 짜기 위한 도구일 뿐, 화면을 그리기 위해 메모리를 두 배로 쓰고 변경된 부분을 계산하는 '순수한 오버헤드(낭비)'를 발생시킵니다.1
수만 개의 주식 데이터가 1초마다 변하는 거대한 대시보드라면 가상 돔이 유리할 수 있습니다. 하지만 전체 웹 개발의 96%를 차지하는 일반적인 블로그, 회사 소개 사이트, 평범한 쇼핑몰에서는 가상 돔의 장점이 전혀 체감되지 않습니다. 요즘 컴퓨터와 스마트폰의 성능이 워낙 뛰어나서, 무거운 가상 돔을 거치지 않고 직접 화면을 바꾸는 방식이 오히려 메모리도 적게 먹고 속도도 더 빠릅니다.
합성 이벤트(Synthetic Event)의 낡은 명분
React는 브라우저의 기본 클릭, 스크롤 같은 이벤트를 한 번 더 감싸서 '합성 이벤트'라는 가짜 이벤트를 만들어 사용합니다. 과거 익스플로러, 파이어폭스 등 브라우저마다 이벤트 이름과 작동 방식이 달랐던 파편화 시대에는 이 기능이 필수적이었습니다. 하지만 웹 표준(ES2015)이 통합된 지금, 브라우저 간 호환성 문제는 사실상 사라졌습니다.2 이제 합성 이벤트는 굳이 필요하지 않은 작업을 추가로 수행하며 메모리를 낭비하는 낡은 기술이 되었습니다.
강제된 획일화와 네이티브 경험의 훼손
브라우저나 운영체제마다 이벤트가 동작하는 미세한 시점이나 스크롤의 느낌은 조금씩 다를 수 있습니다. 하지만 이는 사용자가 해당 기기를 선택한 이유이자 존중받아야 할 고유의 느낌입니다. React의 이벤트 시스템은 프레임워크의 편의를 위해 이런 미세한 차이를 강제로 억눌러 똑같이 동작하게 만듭니다. 이는 각 브라우저가 최적화해 둔 고유의 생태계와 사용자 경험을 무시하는 처사입니다.
가장 치명적인 단점: 웹 접근성 파괴
React는 성능을 높이겠다는 핑계로 개별 버튼에 클릭 이벤트를 달지 않고, 문서 최상단(Root) 한 곳에만 이벤트를 달아 모든 클릭을 낚아채 처리합니다(이벤트 위임). 이러한 설계는 시각 장애인들이 사용하는 '스크린 리더(화면 낭독기)'와 심각한 충돌을 일으킵니다.3 스크린 리더가 클릭할 수 없는 평범한 글자나 빈 공간마저 "클릭 가능함"이라고 잘못 안내하여 장애인 사용자를 큰 혼란에 빠뜨리게 됩니다. 브라우저가 기본으로 제공하는 훌륭한 웹 접근성을 프레임워크가 억지로 망치고 있는 셈입니다.
결론: 96%의 평범한 웹사이트에는 과유불급
과거 브라우저 성능이 떨어지고 웹 표준이 엉망이었을 때, React의 가상 돔과 합성 이벤트는 훌륭한 방패막이였습니다. 하지만 기기 성능이 넘쳐나고 브라우저가 똑똑해진 2026년 현재, 평범한 웹사이트에까지 무거운 React를 고집하는 것은 명백한 '오버엔지니어링'입니다. 이제는 무작정 유행을 따르기보다, 우리가 만드는 사이트의 진짜 목적을 파악해야 합니다. 브라우저 본연의 표준을 존중하면서 가볍고 빠른 대안(바닐라 자바스크립트나 Svelte, SolidJS 등)을 적극적으로 고려해야 할 시점입니다.
참고 자료
- Allen, P. (2021-03-13). Virtual DOM is pure overhead. GitHub. https://github.com/pngwn/docs-test-svelte/blob/main/docs/blog/2018-12-27-virtual-dom-is-pure-overhead.md
- Dude. (2024-04-12). Why do we say that React's synthetic events solve cross-browser compatibility?. StackOverflow. https://stackoverflow.com/questions/78319166/why-do-we-say-that-reacts-synthetic-events-solve-cross-browser-compatibility
- Gasda, T. (2021-02-26). Bug: React roots are announced as clickable to screen readers · Issue #20895. GitHub. https://github.com/facebook/react/issues/20895