React란?
React.js는 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용되는 오픈 소스 JavaScirpt 라이브러리 입니다. 웹 및 모바일 앱의 view layer를 처리하는데 사용됩니다. 또한 React를 사용하면 재사용 가능한 UI 구성 요소를 만들수 있는데 React는 Facebook에서 일하는 소프트웨어 엔지니어 jordan walke가 처음 만들었다고 합니다.
React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 어플리케이션을 만들 수 있습니다. React의 주요 목적은 빠르고 확장가능하며 단순합니다.
리액트(React.js)의 기능은 무엇일까?
React.js 의 몇 가지 중요한 기능을 자세히 살펴보겠습니다.
React.js 속성에는 다음이 포함됩니다.
선언적입니다.
간단합니다.
구성요소 기반입니다.
Server Side를 지원합니다.
광범위합니다.
빠릅니다.
배우기 쉽습니다.
JSX
React에서는 템플릿에 일반 JavaScript를 사용하는 대신 JSX를 사용합니다. JSX는 HTML 인용을 허용하고 이러한 HTML 태그 구문을 사용하여 하위 구성요소를 렌더링하는 간단한 JavaScript입니다. HTML 구문은 React Framework의 JavaScript 호출로 처리됩니다. 또한, 순수한 오래된 JavaScript로 작성할 수도 있습니다.
네이티브 반응
React에는 2015년 Facebook에서 발표한 네이티브 라이브러리가 있습니다.
이 라이브러리는 IOS, Android 및 UPD와 같은 네이티브 애플리케이션에 반응 아키텍처(구조)를 제공합니다.
React-native는 Javascript만을 사용하여 프레임워크를 구축하는 모바일 앱입니다. React와 동일한 디자인을 사용하므로 풍부한 모바일 UI 라이브러리/선언적 구성요소를 활용/포함할 수 있습니다. 일반 iOS 및 Android 앱과 동일한 기본 UI 빌딩 블록을 사용합니다. react-native를 사용하는 가장 좋은 점은 Objective-C, Java 또는 Swift로 작성된 구성요소를 허용/채택하는 것입니다.
단방향 데이터 흐름
React에서는 변경할 수 없는 각 세트가 HTML 태그의 속성으로 구성 요소 렌더러에 전달됩니다. 구성 요소는 속성을 직접 수정할 수 없지만 수정할 수 있는 콜백기능을 전달할 수 있습니다. 이 완전한 프로세스는 속성이 아래로 흐릅니다.
가상 문서 객체 모델
React는 변경 사항을 계산한 다음 브라우저를 업데이트하는 메모리 내 데이터 구조 캐시를 만듭니다. 이것은 프로그래머가 각 변경 사항에 대해 전체 페이지가 렌더링되는 것처럼 코딩할 수 있도록 특수 기능을 허용하는 반면 반응 라이브러리는 실제로 변경되는 구성요소만 렌더링 합니다.
Vue, Angular와 같이 프론트엔드 웹 애플리케이션 개발을 더 쉽게 만들어주는 오픈 소스 플랫폼이 너무 많습니다. 다른 경쟁 기술이나 프레임 워크에 비해 React의 이점에 대해 간단히 살펴보겠습니다.
왜 리액트(React.js)일까 ?
단순성
ReactJS는 바로 이해하기가 더 쉽습니다.
구성요소 기반 접근 방식, 잘 정의된 수명 주기 및 일반 JavaScript만 사용하면 React를 매우 간단하게 배우고 전문 웹(및 모바일 응용 프로그램)을 구축하고 지원할 수 있습니다.
React는 HTML과 JavaScript를 혼합할 수 있는 JSX라는 특수 구문을 사용합니다. 이것은 요구사항이 아닙니다!
개발자는 여전히 일반 JavaScript로 작성할 수 있지만 JSX는 사용하기가 훨씬 쉽습니다.
배우기 쉬움
JavaScript 대한 기본 지식이 있는 사람이라면 누구나 React를 쉽게 이해할 수 있지만 Angular와 Ember는 'Domain-specific Language'라고 하여 배우기 어렵다는 의미입니다. 대응하려면 CSS와 HTML에 대한 기본 지식만 있으면 됩니다.
네이티브 접근
React는 모바일 애플리케이션을 만드는데 사용할 수 있습니다.(React Native). 그리고 React는 재사용성에 대한 매우 좋습니다.
즉, 광범위한 코드 재사용성이 지원됩니다. 따라서 동시에 IOS, Android 및 웹 응용 프로그램을 만들 수 있습니다.
데이터 바인딩
React는 단방향 데이터 바인딩을 사용하고 Flux라는 애플리케이션 아키텍처는 디스패처라는 하나의 제어 지점을 통해 구성 요소로의 데이터 흐름을 제어합니다. 대형 ReactJS 앱의 자체 포함 구성 요소를 디버그 하는 것이 더 쉽습니다.
성능
React는 종속성을 위한 내장 컨테이너 개념을 제공하지 않습니다.
Browserify, Require JS, Babel, ReactJS-di를 통해 사용할 수 있는 EcmaScript 6 모듈을 사용하여 종속성을 자동으로 주입할 수 있습니다.
테스트 가능성
ReactJS 애플리케이션은 테스트하기가 매우 쉽습니다.
React보기는 상태의 함수로 처리될 수 있으므로 ReactJS 보기에 전달한 상태로 조작하고 출력 및 트리거 된 작업, 이벤트, 함수 등을 살펴볼 수 있습니다.
[출처] 구글링 블로그, https://www.c-sharpcorner.com/article/what-and-why-reactjs/
