검색
색인
리액트제이에스, ReactJS
단일 웹 페이지나 모바일 앱에서 사용자 인터페이스 중 화면에 표시되는 뷰 부분의 개발에 사용되는 자바스크립트 라이브러리.
페이스북(Facebook)에서 개발하여 2013년 처음 배포하였고, 오픈소스이다. 모델·뷰·컨트롤러(MVC: Model-View-Controller) 개발 요소 중 뷰(view)만 제공하며, 기존의 웹 기술 HTML, CSS 등과 결합하여 사용할 수 있어 확장성이 뛰어나다. 개발자는 자바스크립트만으로도 개발할 수 있어 사용이 편리하다.


ReactJS와 유사한 앵귤러제이에스(AngularJS)나 백본제이에스(backboneJS) 등은 모델·뷰·컨트롤러(MVC) 개발 방식 기반이다. 개발자는 자바스크립트 이외 별도의 스크립트를 배워야 하고, 다른 라이브러리를 같이 사용하여 개발할 수 없다. 이에 반해 ReactJS 라이브러리를 이용하면, 자바스크립트만으로도 웹 소프트웨어를 개발할 수 있고, 기존의 웹 기술을 결합하여 ‘뷰’ 부분만을 효율적으로 개발할 수 있다. 그리고 문서 객체 모델(DOM: Document Object Model) 구조가 매우 복잡한 단일 웹 페이지에서 특정 요소가 변경되었을 때 웹 페이지 전체를 다시 렌더링하는 것이 아니라 가상(Virtual) DOM 모델을 제시하여 가상 DOM이 실제 DOM을 모니터링하면서 변경된 부분만 렌더링하게 하여 불필요한 자원의 소모를 줄이고 웹 앱 성능을 향상시킬 수 있다.
ReactJS 라이브러리에서 컴포넌트는 JSX(JavaScript XML)라는 HTML과 유사한 형태의 태그를 이용해 구성할 수 있으며, 컴포넌트 객체 기반으로 UI를 관리할 수 있다.
자바스크립트 내에 HTML과 유사한 마크업 형태 (예: <h1>Hello, {formatName(user)}!</h1>)를 그대로 활용하도록 하여 가독성이 높고 특정 변수도 직관적으로 구성할 수 있다는 장점이 있다.

JSX 예제
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)} </h1>;
}
return <h1>Hello, Stranger </h1>;
}