[React] 리액트에 대해 알아보자!

리액트란?

자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.

리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다. 2013년 5월 JSConf US에서 오픈 소스화되었다. (출처-위키피디아)

 

리액트는 어떻게 등장했는가?

리액트가 존재하기 전, 이미 많은 라이브러리와 프레임워크들이(Jquery, Backbone, AngularJS 등) 존재했다. 특히 jQuery가 등장했을 때 엄청난 센세이션이었던 것으로 들었다. 수많은 브라우저에 맞춰 개발을 해야 하는데, 브라우저마다 다 다르니 하나씩 각각 개발할 수 밖에 없었을 것이다. 제이쿼리는 크로스 브라우징에 대한 고민을 덜어주며 인기많은 라이브러리로 성장했다.

시간이 지남에 따라 Backbone과 AngularJS를 비롯한 SPA(Single Page Application)이 구조화된 환경을 제시하기 시작했다.

 

Single Page Application의 등장

기존 웹은 무언가 요청할 때 마다 서버로부터 응답받은 리소스와 데이터를 화면에 렌더링하는 방식이다. Single Page Application은 최초에 페이지 전체를 한 번 로드하고, 이후부터 특정 부분만 동적으로 다시 작성한다.

이런 개념을 적용한 프론트엔드 프레임워크가 등장했지만, app이 커지면 커질수록 데이터의 흐름을 파악하거나 디버깅을 하여 문제를 해결하는 것이 어려웠다고 한다.

 

이 때 facebook이 React를 세상에 들고 나왔다!

위에서 야기된 문제를 해결하기 위해 데이터의 흐름을 직관적으로 알 수 있도록 설계했고, 여전히 큰 인기를 끌고있다.

 

---

React에서 중요한 3가지!

1. Component

컴포넌트(독립적 단위의 소프트웨어 모듈) 기반인 리액트는 재사용성이 좋다. 개발 진행 시 독립적인 하나의 부품을 만들어 해당 모듈이 사용한 어느곳이든 재사용할 수 있게 한다. 레고 블럭처럼 쪼개서 컴포넌트를 만들어두고 사용한다.

 

2. JSX

리액트는 선언형(Declartive ) 패러다임을 따른다. 컴포넌트를 생성할 때 JSX 문법을 사용하여 생성한다. (이것은 JSX를 얻기 위해 따로 무언가 구현하지 않는다는 것을 의미한다.) 선언형 패러다임을 따르는 리액트는 화면 설계에 초점을 맞출 수 있게 도와주는데, 개발자의 고민거리를 줄여준다고 생각한다.

 

3. Vitual DOM

리액트는 가상 DOM을 사용한다. DOM은 정적인 화면에 적합한 모델이므로 페이지에서 많은 변화가 일어나는 지금의 앱에는 취약한 면이 있다. (DOM을 조작한다는 것은 매우 비싼 작업이기 때문이다. 더 자세한 설명은 지난 게시글에서 확인할 수 있다.) 가상돔은 메모리 단에서 컴포넌트에 대한 정보를 비교하여 DOM트리가 업데이트 되어야 할 때만 반영하여 업데이트 해준다.