티스토리 뷰
리액트 교과서 1, 2, 3장 / React 살펴보기
서론
React는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다. React는 강력한 UI 라이브러리이며 Facebook, Netflix, Airbnb 같은 유명 기업들도 React를 기반으로 성공을 거두었다.
JavaScript로 만든 React 컴포넌트는 웹 사이트 어디서든 UI를 재사용 할 수 있다. 물론 React의 접근법이 완전히 새로운 것은 아니다. 컴포넌트로 UI를 구성하는 방법을 사용한 지는 오래되었지만, React는 최초로 템플릿 없이 순수하게 JavaScript만으로 이것을 가능하게 했다.
그리고 이 방법이 유지보수와 재사용, 확장에 좀 더 용이하다는 사실도 입증했다.
React란 무엇인가?
React는 UI 컴포넌트 라이브러리다. React UI 컴포넌트는 다른 특별한 템플릿 언어가 아닌 JavaScript를 이용해서 만든다. 여러 컴포넌트로 UI를 구성하는 이런 방식은 React의 핵심 철학이다.
React UI 컴포넌트는 매우 독립적이며 특정 관심사에 집중된 기능 블록이다. 어떤 컴포넌트는 서버와 직접 통신하기도 한다.
컴포넌트 기반 아키텍처(component-based architecture, CBA)는 일반적으로 일체형 UI에 비해 재사용과 유지보수, 확장이 용이하다. React는 템플릿 언어가 없는 순수한 JavaScript를 기반으로 CBA를 구현해냈고, 이를 통해 컴포넌트 구성에 대한 새로운 시각을 창출해냈다.
React의 장점
새로운 라이브러리나 프레임워크라면 이전 도구보다 항상 뛰어나다고 주장한다.
jQuery의 경우 IE와 웹킷 계열의 브라우저를 동시지원하는 간단한 AJAX 호출을 하기 위해서는 코드를 여러 줄 작성해야 했다. jQuery를 사용하면 $.ajax() 한 번이면 충분했다. Backbone이나 AngularJS 같은 JavaScript 프레임워크도 새로운 방법을 제시했다. 이 점에서는 React도 다르지 않다. React가 가진 장점을 정리하자면 다음과 같다.
- 단순한 앱 개발: React는 순수 JavaScript로 만든 컴포넌트 기반 아키텍처다. 선언형 스타일이며, 강력하고 개발자 친과적인 DOM 추상화를 제공한다. React Native를 사용하면 Android나 iOS에서도 이런 이점을 얻을 수 있다.
- 선언형 스타일 채택
-
선언형으로 작성하면 복잡도를 줄여줄 뿐만 아니라 코드에 대한 이해도와 가독성을 높일 수 있다.
// 명령형 var arr = [1, 2, 3, 4, 5], arr2 = [] for (var i=0; i<arr.length; i++) { arr2[i] = arr[i] * 2; } console.log(arr2) // [2, 4, 6, 8, 10]
// 선언형 var arr = [1, 2, 3, 4, 5], arr2 = arr.map(function(v, i){ return v*2; }) console.log(arr2) // [2, 4, 6, 8, 10]
-
둘 다 결과는 같지만 명령문이 늘어날수록 마지막 결과가 어떻게 될지 예측하기가 어려워진다.
-
- 선언형 스타일 채택
- 빠른 UI: React는 뛰어난 성능을 제공한다. 이는 가상 DOM 채택과 DOM의 변경 사항을 비교할 때 사용하는 훌륭한 알고리즘 덕분이다.
-
강력한 추상화
- React는 강력한 문서 모델 추상화를 제공한다. 자세히 말하면 내부의 인터페이스는 숨기고, 대신에 정규화 과정을 거친 합성 메서드와 속성을 제공한다.
- React의 우수한 DOM 추상화를 증명하는 또 다른 예는 서버 측 렌더링 기능이다. 서버 측 렌더링은 검색 엔진 최적화*(search engine optimization, SEO)*와 성능 개선에도 유용하다.
-
속도와 테스트 용이성
- React의 가상 DOM은 JavaScript 메모리에만 존재한다. 데이터를 변경하면 React는 가상 DOM을 먼저 비교하고, 렌더링 변경이 필요한 경우에만 실제 DOM에 렌더링한다.
- 알고리즘에 관심이 많다면 아래 글을 추천한다.
- 보정(Reconciliation): http://mng.bz/PQ9X
- React의 비교 알고리즘에 대한 글(React's Diff Algorithm) http://mng.bz/68L4
-
- 코드량 감소: React 커뮤니티와 개발 생태계를 통해 수많은 라이브러리와 컴포넌트를 접할 수 있다.
- React 컴포넌트 목록
- Google Material Design
