React란?

React

페이스북에서 발표한 사용량 1위의 웹 라이브러리이다.

JavaScript와 HTML을 합친 JSX(JavaScript XML)라는 문법을 사용한다.

- 이 문법으로 인해 기존 방식보다 코드를 작성하는데 간편하다는 장점이 있다.

 

React의 장점

SPA

· 최근 웹은 ‘웹 애플리케이션’이라고 불릴 정도로 복잡하고 동적이다.

· 동적인 웹 페이지가 늘어나면서 웹의 크기가 커졌기 때문에 서버와의 통신 속도가 느렸다.

· 하지만 리액트는 SPA 방식을 지원하기 때문에 기존 웹 방식보다 속도가 빠르다.

· SPA란 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 필요한 부분만 조작하는 방식이다.

- SPA 지원: React, ES6, Node.js, npm, webpack, Babel, Angular, Vue

 

Virtual DOM

· SPA에서는 DOM 조작이 많이 발생한다.

- DOM(문서 객체 모델): 웹 페이지에 대한 프로그래밍 인터페이스

· 따라서 DOM을 직접 관리할 경우, 전체적인 프로세스가 비효율적으로 되기 쉽다.

· 그러나 React는 Virtual DOM을 사용하여 브라우저 연산의 양을 줄일 수 있어 성능이 개선된다.

· 동적 웹 애플리케이션은 수많은 상태 관리가 필요한데, React를 개발한 페이스북을 예시로 들어본다.

· ‘좋아요’를 누르거나 댓글을 달게 되면 웹 페이지가 반응해 UI가 변경된다.

· 기존의 SPA 방식은 HTML이 변경될 경우 과정을 다시 한번 거치면서 많은 연산을 요구한다.

· React는 Virtual DOM을 사용해 이 과정에서 드는 Resource를 획기적으로 줄이도록 설계됐다.

  - 인터페이스의 변화를 먼저 Virtual DOM에 반영한다.

  - Virtual DOM과 실제 DOM을 비교하고 바뀐 Document Object만 변경한다.

  - 이 과정을 통해 여러 인터페이스를 바꾸는 상황에서도 실제 DOM은 1번만 바꿔주면 된다.

· 이처럼 가벼워진 연산으로 동적 UI를 설계하는 상황에서 React가 성능적으로 유리하다.

Component 단위 작성

 · Component를 사용하기 때문에 재사용성이 높고 효율적인 유지보수가 가능하다.

   - UI를 구성하는 개별적인 View 단위로써 UI 개발이 레고라면 Component는 블록 역할을 한다.

· 하나의 Component를 여러 부분에서 사용할 수 있다.

· 여러 개의 버튼이 필요하다면, 버튼 Component를 생성하고 필요한 곳에 사용하면 된다.

   - 기존 웹페이지를 만드는 방식보다 생산성과 유지보수 면에서 우월하다.

   - 요소 하나가 다른 요소에 영향을 미치는 복잡한 로직을 업데이트하는 경우에 무리가 없다.

 

점유율이 가장 높은 라이브러리

· React를 사용하는 개발자의 수가 계속 증가하는 추세이다.