[React] DeepDive 모던 리액트 (1) 리액트의 역사

728x90

감명있게 읽었던 JavaScript DeepDive의 리액트 버전 책이 나와서 바로 구매해보았다. 마찬가지로 책을 읽으면서 정리해보려고 한다.

사실 리액트를 깊게 공부해야한다 생각은 했지만 정말 리액트란 라이브러리의 원리에 대해 깊게 파거나 리액트에 존재하는 여러 유용한 훅에 대해 공부할 필요성을 느껴서 구매해보기도 했다.

책은 900페이지가 넘어갈정도로 두껍지만 그만큼 배워갈 부분도 많을 것 같아 기대된다.

Why React?

리액트는 2011년 페이스북에서 선보인 10년이 넘은 라이브러리이다. 심지어 리액트가 전자정부 표준 프레임워크의 프런트 엔드 개발도구로도 채택되었다. 그만큼 리액트라는 라이브러리의 안정성또한 보장되었음을 알 수 있다.

jQuery또한 2018년도 리액트에 밀리기 시작하였으며 당분간은 리액트가 독주할 것으로 예상된다.

리액트의 큰 장점들은 아래와 같다.

1. 단방향 바인딩만 지원하므로 명시적인 상태변경이 가능하다.

-> Angular의 경우 양방향으로 바인딩되는데 분명 양방향 바인딩이 주는 장점또한 존재하지만 프로젝트의 규모가 커질수록 상태변화가 명시적으로 전달되는 것이 보이는 단방향이 유리한 부분들이 존재한다.

2. HTML에 JS문법을 더한 JSX를 사용하여 자바스크립트 문법에 친화적이다.

3. 비교적 배우기 쉽다. 단 Vue나 Svelte같은 프레임워크에 비해서는 상대적으로 어려우며 리액트를 완전히 이해하고 성능을 최적화하는것은 조금 다른 문제일 수 있다.

4. 강력한 커뮤니티의 존재.

-> 많은 개발자들이 리액트를 활용해서 개발을 진행하였으므로 그만큼 데이터가 쌓여있고 관련 커뮤니티가 큰 편이다.

리액트의 역사

2000년경 웹 생태계는 리눅스,아파치,PHP를 활용한 웹 개발이 주를 이루던 시기였다. 이러한 시기에는 DB에서 필요한 데이터를 불러온 후 웹 서버에서 HTML 페이지를 만든 후 클라이언트에게 제공되는 방식으로 작동되며 JS는 폼 처리와 같은 부수적인 역할만 하는 방식이었다.

이런 프론트엔드의 역할은 2010년대부터 달라지기 시작 했다. 캔버스,SVG지오로케이션 , ES5 등 다양한 기술 & 기능들이 추가되기 시작했다. 또한 그당시 페이스북은 전 세계에서 가장 인기있는 SNS로 JS번들의 크기를 줄이기 위해 굉장한 노력을 쏟았다.

또한 타임라인 , 댓글들이 실시간으로 동작되어야 하는 페이스북의 특성 상 서버렌더링으로 이 작업들이 작동하면 딜레이가 생길수밖에 없었다. 따라서 JS에 의존하게 되는 피할 수 없게 되었다.

또한 이당시 애플의 강력한 앱 규제에 반발된 스파르탄 프로젝트란 것이 존재했는데 사파리에서 동작하는 페이스북을 만들기 위해서 페이스북을 HTML5를 기반으로 완전히 재작성하는 프로젝트이다. 하지만 해당 프로젝트는 성공하지는 못했다. 이후 ios용 페이스북 앱을 네이티브로 다시 개발하게 되었다. 하지만 해당 프로젝트의 실패가 웹 생태계에 부정적 영향을 주지는 않았다.

BoltJs

페이스북팀은 이 당시 바닐라JS,JQuery,Angular,Backbon.js로는 페이스북의 복잡한 요구사항을 처리하기 어렵다고 생각하여 BoltJS라는 새로운 프레임워크를 만들었다.

현재난 BoltJS관련 코드가 모두 삭제되어 정상적 방법으로는 흔적을 찾아볼 수 없다. 이 BoltJs는 실제 프로덕션 서비스에서는 사용되지 않았으며 페이스북 개발자가 BoltJS로 페이스북을 클론코딩하기 위해 노력했지만 프로젝트의 아키텍처도 복잡해지는걸 느껴서 포기했다고 한다.

이에따라 이 BoltJS를 개선하기 위해 Functional Bolt 즉 Fblot가 나오게 되었는데 이 Fbolt가 바로 리액트의 시초이다. 함수형을 지향하는 새로운 BoltJS는 API변경에 따라 UI를 초기화하고 새로 렌더링하자는 새로운 접근법을 가지고 있었다.

이당시 대부분 프레임워크는 양방향 바인딩이었다. 양방향 바인딩은 코드작성이 간단하지만 변경된 DOM 추적이 어렵고 버그가 발생하는 지점이기도 했다. 이런 방식 대신 모델이 뷰를 변경하는 단방향 방식으로 이전 DOM을 버리고 새로운 DOM을 렌더링하는 Fbolt는 새로운 패러다임을 가져왔다.

물론 DOM을 통째로 변경하는 이방식이 성능보장이 되는지 의구심을 갖는 개발자도 많았지만 DOM 업데이트를 어렵게 하지않고 새롭게 랜더링을 한다는 생각은 많은 사람에게 영감을 주게 되었고 이를 바탕으로 리액트 프로젝트가 시작되었다.

리액트

리액트의 첫번째 프로젝트는 게시글 하단에 있는 댓글,공유 버튼이 있는 UFI(Universal Feedback Interface)를 구현하는 것이었다.

그당시에 해당 기능은 굉장히 복잡한 기능들이 일어났으며 특히 사람들은 실시간으로 좋아요,댓글 행위가 반영되길 원했기에 이를 해결하기 위해서 JSX, Flux 패턴과 같은 아이디어가 등장하게 되었다. 이후 페이스북은 인스타그램을 인수하게 되고 핸드폰에서만 존재하는 인스타그램을 웹 기반으로 개발하기 위해서 BoltJS, 바닐라 JS, 리액트 중에서 리액트를 선택하게 되었다. 이당시에는 이 선택이 굉장히 큰 도전이었다고 한다.

인스타그램 , 기존 페이스북의 거대한 PHP 애플리케이션을 리액트로 대체하면서 페이스북 개발자들은 리액트에 대한 자신감을 얻게 되었고 리액트를 오픈 소스로 공개하는 노력또한 같이 이루어졌다.

리액트에 대한 비판

실제 리액트가 공개되었을때 대다수의 개발자들은 JSX구문의 특징이나 JS코드 안에 HTML을 추가한다는 점 때문에 그리 호의적이지 않았다.

"JS와 XML 문법의 혼용"

"마크업과 JS로직을 섞는것"

"매번 렌더링을 새로하는건 성능에 끔찍한 영향"

"가상 DOM"

등등 여러 비판적인 평가가 나왔다고 한다. 지금 생각해도 충분히 나올법한 의견인건 맞는거 같다. (특히 렌더링 부분)

정말 리액트는 여러가지 파일이 구분되지 못하는 최악의 구조를 가지고 있을까? 그러지는 않다. 리액트 구조또한 컴포넌트 기반으로 컴포넌트의 역할에 따라 관심사가 분리되어 있다. 단 HTML,JS,CSS 파일별로 관심사를 분리하는 기존의 프론트엔드 개발자들과 관점이 조금 달랐을 뿐이다.

물론 리액트에 거부감을 가진 사람들만 있지는 않았기에 애플리케이션에 리액트를 도입하는 개발자들이 생기기 시작하고 페이스북팀 외에 여러 개발자들이 리엑트에 아이디어를 넣으면서 리액트는 점점 커지기 시작했다. 이러한 장점을 극대화하기 위해서 페이스북팀은 리액트 커뮤니티를 형성하는데 많은 노력을 기울이게 되었다.

리액트의 성장

이후 리액트는 거대한 커뮤니티를 배경으로 성장하기 시작했다. 리액트가 제공하지 못하는 것을 채워주기 위한 상태관리,라우터 라이브러리, 서버사이드 렌더링 프레임워크 등이 등장하면서 리액트는 프론트엔드 생태계에서 자리를 잡아나갔다.

리액트를 타 사이트보다 빨리 채택한 웹사이트중 하나는 야후!메일이다.

해당 사이트는 C++ , HTML -> PHP , JS -> React 와같이 변경되었다.

또 다른 사이트로는 넷플릭스가 있다.

넷플릭스는 원래 자바를 기반으로 했지만 사이트 빌드 및 최초 상호작용에 걸리는 시간이 너무 오래걸린다는 문제점을 알고 있었다. 변화가 필요함을 감지한 넷플릭스는 팀을 두개로 나누어 리액트 팀과 비 리액트팀으로 개발을 각자 진행했고 한달 이후 리액트팀의 장점을 받아들이게 되었다.

이후 현재까지도 넷플릭스는 리액트로 운영되고 있다. 전 세계에서 두번째로 큰 IT회사인 넷플릭스가 리액트를 채택하면서 프론트 엔드 시장에서 리액트는 전성기를 맞게 된다.

리액트는 Angular,Vue와는 다르게 웹 개발을 위한 프레임워크를 지향하는 것이 아니기 때문에 다양한 상태관리,서버사이드렌더링,애니메이션,차트 등등의 라이브러리를 활용할 수 있다는 장점이 있다.

심지어 react라는 이름이나 태그를 지닌 npm 패키지가 23만개나 된다하니 정말 거대한 라이브러리라고 할 수 있다.

국내 IT업계에서도 toss,slash,카카오,네이버PC메인 등등 리액트가 대세인 것으로 보이며 Vue나 Angular에 비해 채용하는 포지션 또한 더 많다.

리액트의 미래

과거 리액트는 항상 클라이언트에 초점을 맞추고 있었다. 하지만 앞으로는 클라이언트에서 할 수 없는 서버의 작업 , 서버환경이 가지고있는 가능성에도 집중을 할 것이라고 한다. 즉 Node.js와 같은 서버환경을 공부하는것이 프론트엔드 개발자에게 필요한 덕목이 될 듯하다.

리액트를 공부하거나 사용하면서도 리액트의 역사에 대해서는 잘 알지 못했는데 좋은 내용을 재밌게 잘 읽은 것 같다.