리액트(React)의 역사

모던 리액트 Deep Dive 들어가며 내용을 토대로 정리한 내용입니다.

현재 Front-end 시장은 React를 사용하는 회사들이 대부분입니다. 물론 TypeScript와 Next.js 등과 함께 사용되고 있습니다. 입사 후 너무 당연한 듯 React를 사용해왔지만, React가 등장하게 된 배경과 발전 과정들을 정리하고가면 좋을 것 같아 정리해보았습니다.

---

React의 등장

React는 2011년 지금의 메타인 페이스북의 뉴스피드 페이지에서 처음 선보여진 라이브러리입니다. 최근에는 전자정부 표준 프레임워크의 프론트엔드 개발 도구로도 채택이 되었다고 하는데, 이는 안전성과 유지보수성을 중요시하는 정부의 개발도구로도 채택이 될 만큼 안정성이 확보되었고 많은 개발자 사이에서 널리 쓰이고 있다고 이해할 수 있습니다.

아래는 stackoverflow에서 조사된 가장 인기있는 웹 프레임워크를 보여주는 차트입니다.

React가 40.58%로 가장 높은 점유율을 가진 것을 확인할 수 있습니다.

 

 

React의 장점

그럼 왜 React가 다른 프레임워크와 라이브러리 중 가장 선호하는 라이브러리가 되었을까요?

가장 크게 꼽을 수 있는 장점들은 아래와 같습니다.

• 상태 변화가 단방향, 명시적으로 변경되어 개발자들에게 간단함과 유연함을 제공함
• HTML에 자바스크립트 문법을 더한 손쉽게 구현 가능한 JSX(Javascript XML)
• 비교적 배우기 쉽고 간결함
• 강력한 커뮤니티, 그리고 메인 스폰서 메타의 지원

그밖의 장단점이 있지만 위와 같은 장점을 필두로 React는 Front-end 개발자들이 가장 많이 사용하는 라이브러리가 되었습니다.

 

React의 역사

React 이전 웹 생태계는 LAMP 스택이라고 하는 리눅스, 아파치, 웹 서버, MySQL, PHP를 활용한 웹 개발이 주를 이루던 시기였습니다. 대부분 데이터베이스에 필요한 데이터를 불러온 다음, 웹 서버에서 HTML을 만들어 클라이언트에 제공하는 방식으로 작동했습니다. 즉, 브라우저는 서버에서 받아온 데이터를 바탕으로 다운로드만 받아 렌더링하며, 자바스크립트는 폼 처리와 같은 부수적인 역할만 하는 방식이었습니다.

 

프론트엔드는 2010년대 제이쿼리와 다양한 기능(로컬 스토리지, 웹소켓, 캔버스 등등)을 브라우저에서 지원하기 시작하면서 조금씩 변화하게 되었습니다. DOM을 수정해 사용자에게 다양한 인터렉션을 보여주게 되었고, Ajax를 활용해 클라이언트에서도 서버와 통신해서 데이터를 불러오기 시작했습니다. 이에 따라 자바스크립트 코드가 점차 복잡해지기 시작했고, 자바스크립트 코드의 복잡성을 해소하기위해 코드를 체계화하고자 AngularJS(MVVM 패턴 기반)와 Backbone.js(MVC 패턴 기반)가 등장했습니다.

 

하지만, 페이스북 팀은 바닐라 자바스크립트, jQuery, AngularJS, Backbone.js로는 페이스북의 복잡한 요구사항을 처리하면서 유저에게도 만족스러운 경험을 주긴 어렵다고 판단해 새로운 프레임워크를 만들기 시작했습니다. 이때 만들기 시작한 프레임워크의 이름은 BoltJS입니다. 하지만 BoltJS는 프로젝트 아키텍쳐가 점점 복잡해지는 등 프로덕션 앱에 적용하기엔 어렵다고 판단되어 사라졌습니다.

 

이후 BoltJS를 개선하자는 아이디어로 Fbolt(Functional Bolt)가 등장했습니다. 이것이 바로 리액트의 시초입니다. 이 당시 제안된 아이디어 중 하나는 앱의 API의 변화에 따라 뭔가 변경되면 단순히 UI를 초기화하고 새로 렌더링하자는 것이었습니다. 이는 이 당시 파격적인 접근 방식이었습니다. 왜냐하면 이 당시 프레임워크는 양방향 바인딩 구조를 채택해 밀접한 관계를 맺고 서로가 서로를 변경할 있는 구조였기 때문입니다. 하지만 이 양방향 방식은 코드 작성이 간단하다는 장점이 있지만, 변경된 DOM 추적과 변경된 이유를 추적하는 것이 어렵다는 단점이 있었습니다. 이때는 DOM의 변경을 최소한으로 하는 것이 성능을 위한 최선의 방법으로 여겨지던 시기라 위 아이디어가 성능을 보장할 수 있을지 의구심을 품는 개발자가 많았습니다. 하지만 페이스북 프론트엔드 개발자들에게 가장 큰 어려움은 DOM을 업데이트 하는 것이었기 때문에 데모로 구현한 React는 많은 사람들에게 영감을 주었고, 성능또한 크게 나쁘지 않다는 것을 확인할 수 있었습니다. 그렇게 리액트 프로젝트가 시작되었습니다.

 

이 시점에 페이스북은 인스타그램을 인수했고, 인스타그램 팀도 React의 아이디어에 감명을 받아 React를 선택해 개발하기 시작했습니다. 페이스북은 리액트를 오픈소스로 공개하기 위해 문서화에 심혈을 기울였고, React의 공개 무대로 JSConf US를 선택했습니다. 공개 무대에서는 React와 함께 JSX도 함께 공개했습니다. 하지만 HTML과 JS가 합쳐진 모양인 JSX는 이 당시 웹 개발자들에게는 관심사 분리 원칙을 어긴 것으로 받아들여져 반응은 좋지 못했습니다.

 

모두가 React에 거부감을 느낀 것은 아니었기에, React 접근 방식에 흥미를 느낀 외부 개발자들 중에는 프로덕션에 React를 도입하는 사람도 생겨났습니다. 이렇게 외부 개발자들이 새로운 아이디어와 활기를 불어넣기 시작하면서 React는 원동력을 얻기 시작했고, 오픈소스로 전환해 커뮤니티의 장점을 깨닫게 된 페이스북 팀은 리액트 커뮤니티를 형성하는데 많은 노력을 기울였습니다. 이후 리액트는 커뮤니티의 지지를 받으며 성장해나갔습니다. 리액트 커뮤니티는 리액트가 제공하지 못한 것들을 채워주기 위해 상태 관리 라이브러리, 라우터 라이브러리, 서버 사이드 렌더링 프레임워크 등이 등장하기 시작하면서 점차 리액트는 프론트엔드 생태계에서 자리잡기 시작했습니다.

 

리액트의 현재와 미래

리액트는 계속해서 최신 버전이 업데이트 되고 있고, 현재 글 작성 시점 최신 버전은 18.3.1입니다. 우리나라의 빅테크 기업에서도 React를 사용하고 있으며, 채용 시장에서도 많은 회사에서 React를 사용할 줄 아는 개발자를 선호하고 있습니다.

React는 함께 사용할 수 있는 다양한 라이브러리와 함께 활발히 사용되고 있습니다. 유명한 라이브러리를 포함해 리액트라는 이름이나 태그를 가진 npm 패키지 또한 23만여개가 넘는다고 합니다.

현재 React 팀은 서버에서의 리액트의 활용에 집중하고 있습니다. 추후에는 프론트엔드 개발자도 서버 환경을 공부하는 것이 기본 소양으로 자리잡게 될 것으로 보입니다.