그렇다, 리액트가 프론트엔드 영역을 지배해 나가고 있다, 그 이유는 무엇일까?

원글 : Yes, React is taking over front-end development. The question is why.

원작자 : Samer Buna

리액트가 이토록 인기를 얻고 있는 이유는 아래와 같을 것이다.

• DOM API로 작업하는 일은 쉬운 일이 아니다. 리액트는 개발자에게 실제 브라우저보다 작업하기 더 편한 가상브라우저를 제공한다. 이 가상 브라우저는 실제 브라우저와 개발자 사이의 중재자와 같은 역할을 하는 것이다.
• 리액트는 대부분이 그냥 자바스크립트일 뿐이다. 그렇기에 배워야 하는 API의 양이 많지 않다. 그렇기에 당신의 자바스크립트 스킬이 곧 당신을 더 나은 리액트 개발자로 만들어 주는 것이다. 진입장벽이 거의 없다고 보면된다. 당신이 자바스크립트 개발자라면 단 몇 시간만 공부 해도 리액트를 이해하는데 큰 어려움은 없을 것이다.

하지만 이 외에도 리액트가 이토록 인기를 얻은 이유를 있을테니 그 이유들을 더 살펴보도록 하자. 큰 이유 중 하나는 바로 Virtual DOM이 될 것이다.

리액트의 공식 정의는 다음과 같다 “UI를 만들기 위한 자바스크립트 라이브러리”. 그리고 이에 관해 두가지에 대해 이해하는 게 중요하다.

1. 리액트는 라이브러리다. 모든 것을 다 갖춘 프레임워크가 아니다. 리액트로 작업하다보면 완성된 결과물을 얻기위해 다른 라이브러리 또한 사용해야 할 것이다. 리액트는 다른 것은 신경쓰지 않는다, 오직 한가지, 그 한가지를 뛰어난 수준으로 해내기 위해, 그 한가지에 집중할 뿐.
2. 그리고 리액트가 뛰어나게 잘하는것이 React를 정의하는 글에서도 찾아 볼 수 있듯이 UI를 만드는 것이다. UI란 사용자가 접촉하고 사용할 수 있게 눈으로 보여지는 영역을 말한다. 우리의 일상에서도 UI를 어렵지않게 찾아볼 수 있다. 그리고 우리가 사용하는 기기가 자바스크립트를 이해할 수 있다면, 우리는 리액트를 통해 UI작업을 할 수 있게 된다.

웹 브라우저는 자바스크립트를 이해할 수 있기에 우리는 리액트를 통해 UI를 설명할 수 있게 된다. 여기서 나는 “설명한다”라는 단어를 굳이 사용하고 싶은데 왜냐면 그게 기본적으로 우리가 리액트를 통해 하는 일이기 때문이다. 리액트에게 우리가 필요한게 무엇인지 말하면 리액트는 이에 따라 UI를 만들어 나간다.

리액트가 이토록 인기있게 된건 아래의 3가지 디자인 컨셉 덕분일 것이다.

1. 재사용이 가능하고 구성이 용이하며 상태값을 가지는 Components의 사용.

리액트에서는 Components를 통해 UI를 구성한다. 쉽게 생각하서 Components는 그냥 Function이라 생각할 수 도 있다, 특정한 인풋 값을 통해 특정한 Function을 불러내면 그 결과를 우리에게 반환해 준다. 필요하면 언제든지 재사용이 가능하고 보다 큰 규모의 Components로 확대해 나갈 수 있다. 허나 일반 함수와는 달리 리액트의 Components 상태값을 가진다.

2. 반응적인 업데이트.

리액트의 이름 (반응하다)자체가 다음 컨셉이 무엇인지 말해준다. Components의 상태값이 변하면 이에 따라 연동된 UI 역시 변한다. 일반적으로 브라우저의 DOM에 HTML View부분을 생성하지만, 리액트에서는 리액트 자체가 알아서 적절히 반응을 하므로 이러한 것들은 신경쓰지 않아도 된다.

3. 메모리에 가상의 View를 만든다.

리액트에선 Javascript를 이용해서 HTML를 작성한다. 우리는 Javascript의 힘을 빌려 HTML을 생성하는 것이다. HTML자체를 발전시켜 데이터와 연동 작업하는 방식은 다른 프레임워크가 택하는 방식이다. 예를들어 Angular의 loops 이나 conditionals과 같은.

우리가 서버로 부터 데이터를 받아 그 데이터로 무언가를 하고자 할 때 우리는 HTML이외에 무언가가 필요하다. HTML자체를 발전시켜 데이터를 처리하거나 혹은 애초에 Javascript를 이용해서 HTML를 생성하거나. 두 방법 모두 장,단점이 있지만 React는 후자의 방법의 채택하고 있다.

그리고 이러한 방법이 React가 메모리에 Javascript로 생성한 HTML의 가상 DOM을 유지하는데 더 용이하다. Rreact는 가상 DOM을 통해 HTML트리를 렌더 시키고 변경이 발생할 때 마다 HTML트리 전체를 새로 렌더하는 게 아닌, 바뀌어야 하는 부분만 업데이트 되어 새로운 HTML 트리를 형성한다. 그리고 이러한 과정을 Tree Reconsiliation 이라고 말하는데, 개인적으로 Ajax 이후 웹 개발 분야에서 생긴 일 중에 가장 주목할 만한 발이라고 생각한다.

가상 DOM을 사용하며 React는 마지막에 형성된 DOM을 메모리에 저장해두고 새로운 변화가 생기면 이전 DOM과 비교하며 필요한 부분만 업데이트 시킨다. ( Javascript를 통해 작성하여 메모리에 저장해 놓기 때문에 이러한 작업이 가능한 것이다 ) 이러한 방법은 보다 효율적일 뿐만 아니라 우리가 UI 를 업데이트 시킬 때 발생하는 복잡성의 많은 부분을 해소시켜 준다.