리액트 어쩌다 만들어졌을까?
웹 프로젝트가 커지면서 자바스크립트 파일이 넘쳐나 코드 보기가 난해하고 통제하기 어려워지게 되었다.
jQuery, Angular.js, backbone.js등이 만들어졌고 웹브라우저마다 자바스크립트를 불러오는 방식이 달라 브라우저들간의 통일성을 가지도록 도와줬고 통일성을 가지도록 만들어졌다.
Single Page Application
전통적으로 웹 페이지는 모든 페이지마다 HTML, CSS, Javascript 파일을 각기 가지고 있어야 했고, 따라서 페이지 간 이동을 할 때마다 HTML, CSS, Javascript 파일을 서버와 주고받았기 때문에 속도가 느릴 수 밖에 없었다. Single Page Application은 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 취한다.
Angular.js
이후 구글에 의해 Angular.js 프레임워크가 등장했다. 앵귤러는 작은 컨테이너들이 모여 거대한 앱을 구성하도록 설계된 프레임워크이다. 하지만 앱이 점점 커지고 사용자가 늘어날수록 홈페이지 내에서 user interaction이 기하급수적으로 증가하는데, 복잡성이 증가할수록 데이터의 흐름이 어디로 이어지는지 파악하기가 너무 어려웠고, 디버깅도 어려워지는 문제가 야기됐다.
React의 등장
페이스북도 유사한 문제를 가지고 있었고, 따라서 코드베이스를 업그레이드 시킬 필요성을 느껴 개발한 것이 리액트이다. 리액트는 위에서 말한 문제들에 기반해서 개발된 라이브러리이기 때문에, 데이터가 어디서 어디로 흐르는지 명확히 알 수 있는 장점을 가지면서 선풍적인 인기를 끌었고, 현재도 큰 인기를 구가하고 있다.
- 리액트란
- 가상DOM(virtual DOM)
프론트에서 DOM을 조작하는 전통방식은 하나하나 정확하게 명령을 해야 했다. 모든 단계를 하나하나 지정해주는 것이 명확하지만, 다양한 유저 이벤트에서 각각의 변화가 서로 어떤 연관성을 가지는지 파악하기 어렵다는 문제가 있다.
DOM조작은 성능에 병목을 일으키는 요인 중 하나이다. DOM변경은 변경되어야 하는 요소들 페이지에 다시 엎치는 과정과 모든 요소들을 다시 레이아웃을 계산하여 화면에 위치시키는 작업이 수반되기 때문에 복잡하다.
하지만 리액트는 간결하다 DOM조작은 React-DOM라이브러리가 알아서 하니 화면이 어떻게 보여지기를 원하는지를 알려주는 방식이다. 예를 들어, 화면에 보여지기를 원하는 자바스크립트 객체가 청사진이 되고, 이 청사진에 의거하여 리액트가 DOM을 조작해서 화면에 구현하는 것이다.
그래서 리액트가 채택한 패러다임으로 인해 데이터의 흐름방향 및 요소들 간에 연관성을 파악하기가 더욱 쉬워져, 코드의 복잡성은 줄어들고 코드 퀄리티는 올라가게 되었다.
- 웹사이트를 레고 블록처럼, component
댓글