[ React-Tutorial-01 ] React 란?

01. React 란?

React는 Facebook에서 만든 현재 가장 인기 높은 프론트엔드 라이브러리이다.

웹사이트를 만들기 위해서는 사실 프론트엔드 라이브러리의 도움 없이도 웹사이트를 만들 수 있다.

하지만! 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다.

브라우저 상으로도 자연스럽고 동적인 많은 처리가 가능하다 그런데 어떤 UI를 동적으로 나타내기 위해서는 수많은 상태관리가 필요하다.

그 많은 DOM 요소들을 직접 관리하고 코드를 정리하는것은 매우 힘든 일이다.

불가능한건 아니지만  제대로된 컨벤션을 세워서 진행하지 않는 이상, 갈수록 힘든 일이 될 것이다.

웹 개발을 할 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 UI를 구현하는 것에 집중 하도록 지원하기위해

프론트엔드 라이브러리 및 프레임워크 (Angular, React, Vue ...등)가 만들어 졌다.

그 중 React는 'Component'라는 개념에 집중 되어있는 라이브러리이다. Component를 간단히 설명하자면, 데이터를 넣으면 지정한 UI를 조립하여 보여준다.

React의 생태계는 무진장 넓고 사용하는 곳도 많다. Npm이나 Yarn을 통하여 입맛대로 원하는 스택을 골라서 사용 가능하다.

02. Facebook이 React를 만든 이유

페이스북이 React를 만들기 전에도, 이미 Angular, Backbone, Knockout, Ember 등의 수많은 프레임워크 들이 존재했다. 

그리고 해당 프레임워크 들은

데이터단을 담당하는 모델(Model)

사용자의 화면에 보여지게 되는 뷰(View)

사용자가 발생시키는 이벤트를 처리해주는 컨트롤러(Controller)

이 세가지로 이루어진 MVC 패턴으로 이뤄져 있다.

위에 언급된 프레임워크의 공통통점은 모델이다. 프레임워크의 대부분은 양방향 바인딩을 통해 모델에 있는 값이 변경되면

뷰에서도 이를 변경시켜준다. 일단 첫 화면을 보여주고, 변화에 따라 필요한 부분을 바꿔주는 셈이다.

상당히 복작한 작업이다. 특정 이벤트가 발생되면, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져온 뒤에 

어떤 뷰를 업데이트 해줄지 로직을 정해줘야 하는데 Facebook에서는 리엑트를 만들기전 색다른 발상을 하였다.

"그냥 변화를 주지말자. 그 대신, 모델이 바뀌면 뷰를 다 날려버리고 새로 만들어버리면 어떨까?"

이렇게 되면 정말 간단해진다.

하지만 브라우저가 게임엔진도아니고 DOM기반으로 작동되는 페이지를 그때그때 새로 뷰를 만들어 버린다고하면 성능적으로 엄청난 문제가 생길것이다.

그리하여 사용하는게 바로 Virtual DOM이다

Virtual DOM은 가상의 돔이다. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운 것을 넣는것이 아니라, JavaScript로 이루어진 Virtual DOM에 한번 랜더링을 하고,

기존의 DOM과 비교를 한 뒤 변화가 일어난 부분만 업데이트를 해주는 것이다.

이 Virtual DOM을 사용함으로서, 데이터가 변경되면 어떻게 업데이트를 할 지를 고려하는것이 아니라, 그냥 일단 바뀐 데이터로 그려놓고 비교를 한 뒤에,

바뀐부분만 찾아서 바꿔주는 것이다.

03. React를 특별하게 만드는 점은?

1. 엄청난 생태계

React 생태계에서의 개발자들의 열정은 마치 jQuery가 나왔을 때와 비슷하다. 매우뜨겁다. 그 시절에는 jQuery를 사용하는게 당연했고 이를 사용하는 수많은

플러그인이 나왔다.

이와 비슷하게, 리엑트 라이브러리도 정말 많이 만들어진다. jQUery 혹은 일반 자바스크립트로 만들어진 라이브러리들도 React로 포팅되어 많이 작성된다.

뿐만아니라 단순히 특정기능을 구현하기 위한 라이브러리가 아니라, 프로젝트의 구조와 강하게 묶여있는 라우터, 상태관리 등의 라이브러리도 매우다양하게 존재한다.

2. 사용하는곳이 많다.

알만한 유명한 회사도 React를 사용하고 있다.

Airbnb, BBC, Cloudflare, Codecademy, Coursera, Dailymotion, eBay, Twitch, Walmart, Yahoo…. 등등등등등등..... 정말 수많은 곳에서 사용되고 있다.

3. 한번 사용해보면 좋아하게 된다.

통계적으로 React를 사용한 14689명에게 설문 조사를 했을 때 1020명을 제외한 나머지는 React를 다시 사용할 의향이 있다고 나온다. (약 93%)

또한 2017년 가장 사랑을 많이 받은 라이브러리 이기도 하다.

이 글은 Velopert님의 블로그에서 React 포스팅을보며 실습하며 공부한 자료입니다.