React ?
React는 자바스크립트 라이브러리로,
페이스북(현 메타)의 소프트웨어 엔지니어 Jordan Walke가 개발했다.
동적인 UI(User Interface) 구축을 통해 사용자와 상호작용할 수 있는 UI를 만들 수 있다.
React 장단점
1. 장점
-
선언형 Declarative
JSX를 통해 하나의 파일에서 HTML, CSS, JS를 볼 수 있으므로 코드의 의도를 명시적으로 파악할 수 있다. -
컴포넌트 기반 Component-based
Component 기반의 구조로 재사용성과 유지보수성을 높일 수 있다.
- 유지보수에 용이
- 유닛 테스트
- 기능 자체에 집중하여 개발 가능 -
범용성
프레임워크가 아닌 라이브러리라 다른 프레임워크와 같이 사용 가능하다.
또 React Native 로 모바일 앱 개발도 가능하다. -
Virtual DOM 구현으로 동적 웹 구현시 성능이 빠르다.
-
서버 사이드 렌더링, 클라이언트 사이드 렌더링 둘 다 지원한다.
2. 단점
ajax, routing, state managment 등을 기본 내장하지 않아서 추가 라이브러리를 사용해야한다.
< 추가 라이브러리 >
1. axios (ajax통신)
2. redux (어플 상태관리)
3. react-router (routing)
4. immutable.js (immutable data library)
React 구조
1. 싱글 페이지 어플리케이션(SPA) or 모바일 어플리케이션
▶ 싱글 페이지 어플리케이션(SPA : Single Page Application)
- 모바일 App처럼 새로고침없이 웹 페이지가 동작하는 것.
- React, Angular, Vue로 개발할 수 있다.
장점
- 업데이트된 부분만 새로 불러온다
서버로부터 새로운 전체 페이지를 불러오는 것이 아니고, 업데이트할 필요 데이터만 서버로부터 전달받아 브라우저에서 해당 부분만 업데이트하여 보여준다.
단점
- JS 파일의 크기가 커서 다운시간이 길어짐으로 첫 화면 로딩 시간이 길어진다
- SEO(검색엔진 최적화)에 안좋다. HTML 파일에 데이터가 없어서 검색엔진이 분석할 데이터가 없기 때문이다.
2. 단방향 데이터 바인딩
| Angular | React | Vue |
|---|---|---|
| 단방향, 양방향 바인딩 | 단방향 바인딩 | 단방향, 양방향 바인딩 |
React는 다른 MVC(Model, View, Controller) 구조와 다르게 단방향 데이터 흐름을 지향한다.
단방향 데이터 흐름은 양방향보다 데이터를 감지하는데 부담이 적고 데이터를 추적하기 쉽다.
1) 데이터 바인딩 이란?
화면(뷰) - 데이터를 연결하여 동기화 상태를 유지하는 것.
JS데이터가 변경되면 View화면도 같이 업데이트되는 것이다.
방식은 양방향 바인딩, 단방향 바인딩으로 나뉘어진다.
예) MVC구조에서는 Model과 View를 묶어 동기화시키는 것
1-1) 양방향 바인딩
- Two-way Data Binding
- JS(데이터) <=> HTML(사용자의 입력값)
사용자의 입력값이 데이터로 바인딩된다.
👍장점
- View가 바로 업데이트된다.
- 업데이트하는 이벤트코드가 필요없으므로, 코드량을 줄여준다.
👎단점
- 변화감지해서 DOM전체를 렌더링 or 데이터 변경하므로 성능저하될 수 있다.
1-2) 단방향 바인딩
- One-way Data Binding
- JS(데이터) => HTML(사용자의 입력값)
화면 => JS데이터 수정하려면, JS이벤트를 통해 화면을 업데이트 시켜야 한다.
👍장점
- 코드를 이해하기 쉽고 추적과 디버깅이 쉽다.
- 일관된 데이터 관리 로직을 갖는다.
👎단점
- View가 바로 업데이트되지 않기때문에, JS에서 이벤트 함수를 통해 화면에 업데이트해줘야한다.
3. 가상 돔 (Virtual DOM)
1) DOM 이란?
- Document Object Model
- 트리형태로 특정 노드 CRUD 가능
브라우저가 HTML을 DOM 트리구조로 만든 객체이기 때문에 JS로 DOM객체에 접근, 조작 가능 - 정적인데, JS로 동적으로 사용 가능
DOM의 성능이슈 문제
DOM은 요소의 변화 감지시 <CSS 재연산, 레이아웃 구성, 페이지 다시그리기>의 과정을 거치는데, 많은 요소들을 자주 업데이트할 경우 성능 저하 문제가 발생한다.
위 문제의 성능향상을 위해서 React는 가상 돔을 사용하여 최소한으로 DOM을 조작한다.
2) Virtual DOM
- 가상 돔은 실제 DOM조작이 아니라 DOM을 추상화한 JS객체를 사용하는 것으로
실제 DOM의 사본으로 생각하면 된다. - 실제 DOM 보다 가볍다
- DOM 조작을 최소화하므로 성능 향상에 도움이 된다.
- 대규모 어플리케이션 or 동적인 웹일 경우,
실제 DOM에서 CRUD조작하는 것보다 Virtual DOM(JS객체)에서 조작하는 것이 더 빠르다. - 가상 DOM 또한 HTML 문서 객체를 기반
<React 방식>
1. 변경사항이 저장된 Virtual DOM 생성 render()에서 js객체 반환함
2. 이전의 Virtual DOM과 현재 Virtual DOM을 비교
3. 변경된 부분만 실제 DOM에 업데이트
React 특징
- JSX 문법
- Components
- Props , State
- Conditional Rendering 조건부 렌더링
- Component Life Circle
- Lists and Keys
- Composition, inheritance
- Hooks
