React란?
리액트는 UI 자바스크립트 라이브러리/프레임워크로써 SPA(Single Page Application)의 UI(User Interface)를 생성하는데 집중한 프레임워크/라이브러리다.
리액트는 JSX이라는 문법과 단방향 데이터를 근간으로 사용된다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리다.
Why React?
리액트를 왜 사용할까? 그 이유를 알기 위해서는 SPA가 뭔지를 알아봐야 한다.
SPA는 웹/앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. 이런 특징들은 SPA가 모바일 웹에 최적화 된 이유이기도 하다. 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있다.
위에서 언급했듯이 리액트는 SPA의 UI를 생성하는데 집중한 프레임워크/라이브러리다.
React 특징
-
가상돔
실제 돔의 가벼운 사본개념인 가상돔을 사용한다. -
컴포넌트 기반
header, footer, button등 독립된 작은 컴포넌트들을 조립하여 페이지를 구성한다. 재사용성 측면에 좋고 이는 곧 유지/보수/관리에 있어 효율적이다. -
단방향 데이터 바인딩
데이터가 단일방향으로만 흐른다. 데이터 흐름을 단방향으로 제한함으로써, 데이터 추적/디버깅/관리를 쉽게 한다.
