React, 프론트엔드의 왕

- 서문

만약 당신이 이미 개발자거나, 프론트엔드 개발에 관심이 있다면 React.js에 대해 최소한 들어는 봤을 것이다.

당신이 React를 좋아하지 않더라도 의심의 여지없이 React는 현재 프론트엔드의 왕이다.

2022 Most Wanted - stackoverflow

프론트엔드 왕의 자리를 넘보는 수많은 시도가 있었고 지금도 계속되지만, 2023년 아직까지는 그리고 한동안은 React가 왕의 자리를 굳건히 지킬 것 같다.

기술적으로 프론트엔드 개발자는 아니긴 하지만 최근 내가 가장 많이 공부했고 개발한 영역이 React기도 하여 가볍게 이 왕의 길을 되짚어보고자 한다.

- React 이전 시대

React가 탄생하기 전 jQuery가 있었고 jQuery는 Ajax와 DOM을 다루어 기존 서버에서 HTML을 작성하는 불합리성을 타파하고 본격적으로 프론트엔드의 기반을 다졌다.

이 시기에 jQuery는 급속도로 성장하여 방대한 웹 프론트엔드를 jQuery로 통일시켰다 해도 과언이 아닐 정도로 많이 사용되었고 이 때문에 jQuery 의존도가 현저히 낮아진 지금까지도 전체 웹사이트 중 과반수가 jQuery의 잔재가 남아있다.

jQuery는 그 당시의 개발자들에게 기존보다 혁신적으로 간편함을 주었지만, 그럼에도 불편함은 여전히 많았다.

일단, DOM에 직접 접근한다는것은 웹의 복잡성이 증가할수록 가히 엄청난 난이도의 상승을 불러오게 되었고 코드의 재사용성도 좋지 않았다.

물론 그정도로 복잡한 웹이 많지 않았고 대부분의 웹들은 jQuery 덕분에 더욱 간편하게 웹을 개발할 수 있었다.

- AngularJS의 등장

이후 jQuery조차로도 벅찼던 구글은 자사 직원이 만들던 AngularJS를 공식적으로 지원하여 획기적으로 웹 프론트엔드의 복잡성과 번거로움을 줄였다.

AngularJS는 데이터의 양방향 바인딩을 통해 코드의 재사용성을 눈에 띄게 높였다.

당연히 복잡한 구조의 웹에서 jQuery에 비해 난이도 또한 급감했다.

하지만, jQuery가 복잡하여 넘어간 웹들은 당연히 애플리케이션이 거대한 존재들이었고 곧 데이터의 양방향 바인딩이라는 혁신이 오히려 그들의 발목을 잡았다.

AngularJS는 데이터의 양방향 바인딩을 위해 watcher를 등록하게 되는데 이때 Model이 변경되면 등록된 모든 watcher에게 digest loop가 수행되어 데이터가 변경되었는지 확인하도록 만들었다.

이때문에 DOM 조작 난이도는 급감했지만 DOM을 직접 조작한다는 값비싼 작업을 하는 것이 변한 것은 아니기에 애플리케이션이 커질수록 성능저하를 일으켰다.

이는 AngularJS가 Angular로 업그레이드하게 된 계기가 되었다.

그리고 이와 동시에 React가 등장하였다.

- 프론트엔드의 왕

같은 문제를 겪고 있던 페이스북은 새로운 방법을 모색했고 Virtual DOM을 통해 그 돌파구를 찾았다.

앞서 말했지만 DOM을 직접 조작하여 변경하는것은 자원을 꽤나 많이 잡아먹는 작업이었고 이는 페이스북같이 사용자와 상호작용이 많은 애플리케이션에서 성능에 심각한 문제를 야기했다.

그리하여 페이스북은 Virtual DOM을 이용해 실제 DOM에 접근할 필요없이 Virtual DOM의 변경사항, props와 state가 변경될때만 실제 DOM에 적용하는 방식을 통해 성능과 DOM 관리 자동화로 인한 개발 난이도 하락의 두마리 토끼를 다 잡았다.

이러는 와중 AngularJS가 Angular로 업데이트하며 기존 버전과 전혀 호환되지 않도록 새롭게 탈바꿈하는 패착을 두며 개발자들에게 신뢰성을 잃었고 어차피 바꿔야한다면 React로 바꾸자 생각들게 만들었다.

이후 React는 Redux와 Flux 패턴 전략으로 프론트엔드의 왕좌에 오르게된다.

Thanks for watching, Have a nice day.

References

https://poiemaweb.com/angular-basics
https://m.blog.naver.com/jjoommnn/130181901609
https://velopert.com/3236