리액트(React) 및 리액트 네이티브 개요 (2015)
Source
Evernote/Inbox/페이스북의 인기 오픈소스 기술, ‘리액트’란.md
Summary
이 문서는 2015년 기준 페이스북의 오픈소스 기술인 리액트(React)와 리액트 네이티브(React Native)의 특징과 개발자 평가를 소개한다. 리액트는 MVC 패턴 중 View(V)에 집중하는 자바스크립트 라이브러리로, 커스텀 태그(컴포넌트) 기반의 모듈화, 가상 DOM(virtual DOM)을 통한 성능 최적화, 단방향 데이터 바인딩이 주요 특징이다. 리액트 네이티브는 리액트를 기반으로 iOS/Android 네이티브 앱을 개발할 수 있게 하며, 웹뷰 기반 하이브리드 앱과 달리 실제 네이티브 UI 컴포넌트를 사용하고 JS/네이티브 코드를 별도 스레드로 분리하여 성능 병목 현상을 줄인다. 당시 개발자들은 앵귤러JS 대비 학습 곡선이 낮고 직관적이며, 기존 네이티브 UI 개발의 복잡성(레이아웃 제약 등)을 해소하고 코드 재사용성을 높일 수 있다는 점을 장점으로 꼽았다. 인스타그램, 넷플릭스, 에어비앤비 등이 실제 서비스로 적용하고 있었다.
Key Points
- 리액트(React): 페이스북/인스타그램 개발진이 만든 UI용 자바스크립트 라이브러리 (2013년 공개).
- MVC의 View(V) 계층에 특화되어 있으며, 커스텀 태그를 통한 컴포넌트 기반 개발을 지원한다.
- 가상 DOM(virtual DOM)을 활용하여 변경된 부분만 업데이트함으로써 렌더링 성능을 최적화한다.
- 단방향 데이터 바인딩을 통해 데이터 흐름을 명시적이고 단순하게 관리한다.
- 리액트 네이티브(React Native): 리액트 문법을 사용하여 iOS/Android 네이티브 앱을 개발하는 프레임워크 (2015년 1월 발표, 당시 iOS 지원).
- 기존 하이브리드 앱(웹뷰 기반)과 달리 실제 네이티브 UI 컴포넌트(
등)를 직접 사용한다. - 자바스크립트와 네이티브 코드를 별도 스레드로 분리하고 비동기 통신을 수행하여 JS 실행으로 인한 성능 저하를 방지한다.
- 개발자 평가: 앵귤러JS 대비 학습량이 적고 직관적이며, 기존 네이티브 UI 개발의 레이아웃/디자인 수정 어려움을 해소하고 크로스플랫폼 코드 재사용이 가능하다.
- 적용 사례: 인스타그램, 넷플릭스, 에어비앤비, 세일즈포스, 깃허브 아톰 에디터 등.