리액트(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)

• 컴포넌트 = UI를 구성하는 개별적 뷰 단위

• 컴포넌트 별로 나누어 개발 가능

• 자바스크립트와 JSX 사용시 간단하게 구현 가능

• 개발 속도가 빠르며 유지보수에 용이

※ JSX (Javascript + xml) : 자바스크립트의 확장 구문, 리액트에서 element(요소) 제공

단방향 데이터플로우

• 데이터가 UI로 흐르는 구조
• 데이터 변경시 UI 업데이트
• UI에서 데이터를 변화시키는 것은 불가능
• 즉, 데이터 변경시, UI는 변화된 새로운 데이터와 함께 업데이트

장점

• 컴포넌트 사용으로 재사용성이 좋음 / 유지보수 편함
• 생태계가 넓고 다양한 라이브러리 활용 가능
• 라이브러리이기 때문에 다른 프레임워크 및 라이브러리 혼용 가능
• Virtual DOM을 활용하여 빠른 렌더링 가능
• 단방향 데이터 바인딩을 통한 디버깅 용이
• 안정성이 높은 라이브러리로 평가받음
• 리액트 네이트브를 활용하여 앱 개발 가능

단점

• MVC 중 View만을 관리
• 진입장벽이 높은 편

참고:

[React] 내가 React를 선택한 이유

React를 사용하는 이유

태그 : Front-end, React, Pros And Cons