최근 개발 트렌드, 특히 웹 개발 트렌드는 참 빠르게 변화하고 발전하고 있다. 자바스크립트를 기반으로 참 많은 라이브러리/프레임워크가 나오고 사라져가기 때문에 프론트엔드 개발자 입장에서는 참 재밌기도 하고 혼란스럽기도 하다. 그리고 문득 그 역사가 궁금해져서 오늘은 React가 왜 만들어졌는지 찾아 보았다.
React의 등장 이전에도 프론트엔드 단에 수 많은 라이브러리/프레임워크가 존재했다. 그 시작은 2006년에 등장한 Jquery부터인데 Javascript에서 DOM을 다루는 것을 효율적으로 도와주고 웹브라우저들마다 자바스크립트를 불러오는 방식이 달라 어려웠던 점을 해결해 주었다고 한다.
이후 웹 생태계가 더 발전하고 어플리케이션의 크기가 커지자 자바스크립트 파일이 넘쳐나면서 통제가 어려워졌다고 한다. 그래서 효율적으로 관리하기 위해 backbone.js 같은 라이브러리가 등장하면서 자바스크립트 파일의 조직적인 관리가 용이해졌고, 빠르고 큰 웹을 위해 Single Page Application이 등장했다.
그리고 이러한 흐름과 함께 Facebook에서도 XHP에서 모티브를 얻어 만든 React.js를 공개했다. XHP는 PHP에서 HTML을 편하게 출력 할 수 있게 도와주는 프레임워크인데 이 아이디어를 JSX 문법으로 발전시켰다. (이거는 그때 웹 개발자들에게 진짜 신세계였을 듯하다.)
React는 Virtual DOM, 라이프사이클 메서드, 단방향 데이터 흐름 등의 특징을 가지고 있는데, 가만 보면 다 View쪽을 효율적이고 독립적으로 다루기 위함을 알 수 있다.
그렇다. React는 View만을 위한 라이브러리이고 공식문서에서도 그렇게 설명한다. 사용자와 인터렉션을 통한 UI의 표현을 효율적으로 해주는 것에만 집중 한 것이다. 그래서 가볍고 자유롭다.
개발자들을 이게 마음에 들었는지 발전해 나가기 시작했다. 라우팅(react-router), 상태 관리(redux), 빌드(Webpack, Babel)등을 만들고 접목시켜 SPA(완제품)를 만들어냈고 아주 인기 있는 라이브러리가 되었다. (Creact React App도 큰 역할을 했을거다.)
음, 더 알고싶은것이 있다. 새로운 것이 나왔다면 기존 것의 문제점을 해결하거나 더 좋게 만들기 위함이 분명한데 Facebook은 무엇을 해결하기 위해 React를 만들었을까?
앞서 말한 React의 특징 중 단방향 데이터 흐름에 대해 히스토리가 있다. 이즈음 Facebook은 기존 MVC 패턴을 가진 대규모 애플리케이션에서 구조가 너무 복잡해지고 예측성이 떨어지는 문제점에 직면했다고 한다. 대표적으로 "Facebook 알림 버그" 사례가 있는데, Facebook에 로그인하면 화면 위 메시지 아이콘에 새로운 알림이 있다고 표현되지만 클릭하면 아무런 메시지가 없는 버그였다고 한다.
이 버그는 수정하고 나오고 수정하면 나오고 하는 고질적인 문제였다고 한다. 아마 의존성이 많아 이걸 고치면 저게 문제고 저걸 고치면 이게 문제고 했지 않았을까 싶다. (예측 불가능)
이 문제를 해결하기 위해서는 좀 더 예측 가능한 형태로 코드를 구조화하는 것이 필요했고, React와 Flux를 이용해서 그것을 달성하고자 했다고 한다.
잠깐 MVC 패턴(Model-View-Controller)에 대해 설명하자면, 데이터를 다루는 로직(Controller), 데이터(Model), 사용자 인터페이스(View)를 나누어 어플리케이션을 구현하는 하나의 개발 모델이다.
Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 하며, Model의 변화는 View에 반영된다. 그리고 사용자가 뷰를 통해 데이터를 입력하면, 모델에 영향을 주면서 데이터를 관리하게 된다.
아주 간단하고 이해하기도 쉽다. 로직, 데이터, 뷰를 나누어 관리하기 때문에 참 효율적이라고 생각한다.
그러나 앞서 말했듯 Facebook 웹 앱에서의 MVC 구조는 앱이 커지면서 굉장히 복잡해졌다고 한다. View가 다양한 상호작용을 위해 여러개의 Model을 동시에 업데이트하는 상황이 나타났기 때문이다. 맞는 말 같긴하다. 이렇게 많은 의존성을 가지게 되면 개발 시에 당연히 예측불가능한 상황이 많이 나온다. (하지만 MVC는 지금도 많이 쓰이고 잘 짜면 잘 짤 수 있는듯하다.)