** React 를 왜 사용할까 ?
1. React.js 란?
" Facebook에서 내부적으로 개발한 javascript 라이브러리 "
2. React.js 는 view 라이브러리.
라우팅부터 모델, 컨트롤러까지 Angular js 및 Backbone js 에서는 MVC 형태를 모두 갖추고 있는 MVC 및 MVVM framework 라면,
React는 뷰단을 조작하는 라이브러리.
React가 가지는 관심사는 뷰에 대한 부분이기 때문에 기타 라우팅 및 모델에 관련된 부분을 신경쓰지 않음.
오로지 DOM 객체의 갱신 및 이벤트 응답에만 관심이 있음.
React 는 DOM 업데이트에 관련된 성능이 강점으로 작용함.
3. React 특징
DOM 업데이트 효과적으로 처리할 수 있음.
(1) JSX (javascript XML 의 약자)
- html 과 유사한 문법을 보임으로써 React 컴포넌트에서 사용할 마크업을 작성하기 위한 문법체계.
- 문자열 형식으로 html 마크업을 표현하는 것이 아닌 HTML 마크업 그대로 사용함. --> 문자열을 바꾸거나 할 필요없이 그냥 작성할 수 있음.
(2) 단방향 데이터 흐름 , "one-way reactive data flow"
React의 데이터 흐름은 단방향이고, Reactive하다
데이터는 Parent로부터 Child로 흐르며, 데이터의 갱신에 반응하여 뷰 또한 갱신
애플리케이션의 데이터를 관리하는 모델 컴포넌트가 있고 그 데이터를 UI 컴포넌트에 전달하는 단순한 데이터 흐름으로 이해하고 관리하기 쉬운 애플리케이션을 만들 수 있음.
- angular js 및 backbone은 Data 변경을 framework에서 감지하고 있다가 변경되는 시점에 DOM 객체에 렌더링 해주거나, 페이지 내에서의 모델의 변경을 감지하여 javascript 실행부에서 변경하는 "양방향 데이터 바인딩" 을 가지고 있음.
- 양방향 데이터 바인딩 코드는 코드량으 크게 줄여주지만 자체 실행 코드 내에서 데이터의 변화를 감지하여 DOM 객체 전체를 렌더링 해주거나 데이터를 바꿔주는 등의 실행으로 인해 성능이 감소됨.
- React는 실행부 자체 내에서 데이터 변화 감지하지 않음.
- 데이터 변화가 오게 되면 특정 함수를 실행시킴으로써 DOM 객체를 갱신한다. 따라서 성능에 관련되어 데이터 변화에 따른 성능 저하 없이 DOM 객체를 갱신해 줄 수 있는 장점이 있다.
(3) Virtual DOM
- React는 뷰 컴포넌트 라이브러리이기 때문에 다양한 MVC 프레임워크에 활용할 수 있음.
- pure javascript로 개발이 가능.
- EMCA 6 Script 사용할 수 있음.
- 프레임워크를 사용하지 않아도 Facebook에서 개발한 Flux나 Reflux, Redux 등을 통해 모델 단을 개발.
React.js는 자바스크립트 내에 DOM Tree와 같은 구조체를 VIRTUAL DOM으로 갖고 있습니다. 다시 그릴 때는 그 구조체의 전후 상태를 비교하여 변경이 필요한 최소한의 요소만 실제 DOM에 반영합니다. 따라서 무작위로 다시 그려도 변경에 필요한 최소한의 DOM만 갱신되기 때문에 빠르게 처리할 수 있음.
(4) props
- parent로 부터 받는 데이터 ( 자식 컴포넌트 입장에서)
- 불변성 데이터 ( 값을 바꿀 수 없는 데이터 )
- mutable state ( 변경 가능한 값 ) 들은 props으로 대체 표현되거나 한 곳으로 몰아 넣을 수 있음.