[React.js] React.js란

React란?

: Facebook에서 제공해 주는 프론트엔드 라이브러리

: 싱글 페이지 애플리케이션의 UI 개발을 위한 자바스크립트 라이브러리

React 특징

1. Component 기반의 UI 라이브러리

: React는 Component 기반의 UI 라이브러리로 HTML의 모든 요소들을 컴포넌트화하여 재사용할 수 있다.

: 컴포넌트가 필요한 페이지들이 반복해서 코드를 입력할 필요없이 컴포넌트 이름만을 가져와 사용이 가능하다.

: 기존엔 코드가 중복될 경우 중복되는 코드들을 각각 수정해야했다면, 컴포넌트화 방식에서는 컴포넌트만을 수정하여 공통으로 사용되는 요소에 수정사항이나 문제가 발생했을 때 유지보수하기 쉬워진다.

2. 선언형 프로그래밍

: React는 선언형 프로그래밍을 추구한다.

프로그래밍은 명령형 프로그래밍과 선언형 프로그래밍으로 구분할 수 있다.

- 명령형 프로그래밍 : '어떻게(How)'에 집중하여 절차를 하나하나 다 나열하여 코드가 길어짐 (ex.jQuery)

- 선언형 프로그래밍 : '무엇(What)'에 집중하여 목적을 바로 말함 (ex.React)

3. VIrtual DOM

: React는 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 Virtual Dom을 사용해 웹 애플리케이션의 성능을 극대화시켰다.

우선 DOM이란 문서객체모델로 브라우저가 HTML을 트리형태로 변환시켜 놓은 객체로, DOM이 계속해서 변경되면 브라우저가 필요이상으로 많은 연산을 수행해야 하고 성능저하까지 이어지게 된다.

이러한 문제를 해결하기 위해 나온 것이 VIrtual DOM이다.

Virtual DOM은 자바스크립트가 요소를 추가하는 과정에서 발생하는 변화를 가상의 DOM에 미리 업데이트 후 한 번에 실제 DOM에 업데이트시켜 주어 효율성과 속도를 개선할 수 있다.

4. JSX

: 자바스크립트 확장 문법으로 JSX를 통해 컴포넌트를 구성하기 쉽다.

: HTML문법과 유사한 JSX를 통해 쉽게 컴포넌트를 생성할 수 있다.

5. 단방향 데이터 바인딩

: React는 데이터의 흐름이 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 전달되는 단방향 데이터 바인딩이다.

: Angular와 같이 양방향 데이터 바인딩은 규모가 커질수록 데이터 흐름을 추적하기 힘들고 복잡해져 성능 저하가 발생할 수 있어 React에서는 복잡한 앱에서도 보다 더 쉽게 데이터를 추적할 수 있는 단방향 데이터 바인딩을 사용한다.

참고

Dain-ing