리액트(React)
- 페이스북이 만든 사용자 인터페이스(UI) 개발을 위한 라이브러리
- UI 컴포넌트를 만들어 캡슐화 시켜줌
- 리액트를 본격적으로 배우기 전 리액트의 특징을 알아봄으로써 사용 이유를 파악하고자 함
프론트엔드 라이브러리
- 정적 페이지가 아닌 웹 앱 또는 웹 어플리케이션으로 불릴 정도로 복잡하고 동적으로 변모
- 웹의 크기가 커지면서, 자바스크립트 파일의 관리가 어려워짐
- 기존의 페이지들은 모든 페이지마다 HTML/CSS/Js 파일을 각기 가지고 파일 이동시마다 서버와 주고 받아야하기 때문에 속도면에서 비효율적
- SPA(Single Page Application)이 등장하며 SPA는 HTML/CSS/Js 파일을 최초 1회만 로드하며, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식
- 이는 서버에서 새 페이지를 부르지 않고 jsp 파일 없이 index.html 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념
- 웹의 발전과 함께 SPA 개발을 위한, ES6, Node.js, npm, webpack, Babel, Angular, React, Vue와 같은 프론트 라이브러리, 프레임워크 등장
리액트 특징
자바스크립트 기반
- 앵귤러(Angular) 또는 뷰(Vue)처럼 다른 언어를 배울 필요없음.
- 자바스크립트를 활용하면 쉽게 사용할 수 있음.
선언형
- 사용자 인터페이스 제작시 쉽고 간결함.
- 애플리케이션에서 디자인 뷰와 연결된 데이터 변경시, 이에 맞는 컴포넌트들을 올바르게 랜더링해 화면을 구성
- 예측 가능한 코드 및 쉬운 디버깅 제공
가상 DOM (Virtual DOM)
- DOM Tree와 같은 구조체를 Virtual DOM으로 가짐
- DOM 직접 조작이 아닌 In-memory의 가상 DOM을 조작하여 효율적이고 빠름
컴포넌트 (Components)
※ JSX (Javascript + xml) : 자바스크립트의 확장 구문, 리액트에서 element(요소) 제공
단방향 데이터플로우
- 데이터가 UI로 흐르는 구조
- 데이터 변경시 UI 업데이트
- UI에서 데이터를 변화시키는 것은 불가능
- 즉, 데이터 변경시, UI는 변화된 새로운 데이터와 함께 업데이트
장점
- 컴포넌트 사용으로 재사용성이 좋음 / 유지보수 편함
- 생태계가 넓고 다양한 라이브러리 활용 가능
- 라이브러리이기 때문에 다른 프레임워크 및 라이브러리 혼용 가능
- Virtual DOM을 활용하여 빠른 렌더링 가능
- 단방향 데이터 바인딩을 통한 디버깅 용이
- 안정성이 높은 라이브러리로 평가받음
- 리액트 네이트브를 활용하여 앱 개발 가능
단점
- MVC 중 View만을 관리
- 진입장벽이 높은 편
참고:
[React] 내가 React를 선택한 이유
React를 사용하는 이유
태그 : Front-end, React, Pros And Cons