- 리액트란?
UI를 개발하기 위한 자바스크립트 라이브러리
가장 인기있는 라이브러리
1) JSX
자바스크립트와 HTML을 동시에 사용하며, 함수가 HTML을 반환하거나
HTML에 자바스크립트 변수들을 바로 사용할 수 있는 일종의 템플릿 언어
2) 단방향 데이터 바인딩
양방향 데이터 바인딩은 UI를 감시하는 왓처와 자바스크립트 안 데이터의 변경을 감시하는 왓처를 통해
자동으로 그 둘을 동기화 시켜주는 기능이다. (앵귤러와 뷰는 이 방법을 사용하고 있다.)
그러나 오버스펙인 경우와 성능저하의 이유로 리액트는 단방향 데이터 바인딩을 채택하고 있다.
단방향 바인딩이란?
단 하나의 왓처가 자바스크립트 데이터 갱신을 감지하여 사용자의 UI를 갱신한다.
사용자 UI를 통해 데이터를 갱신할 때는 왓처가 아닌 이벤트를 통해 명시적으로 갱신한다.
이로 인해 양방향 데이터 바인딩에서 발생하는 문제들을 해결하고, 더 명확하게 데이터를 추적할 수 있다.
3) 가상 돔
리액트는 가상 돔이라는 개념으로 싱글 페이지 애플리케이션의 퍼포먼스 향상에 새로운 접근 방식을 제안했고,
이를 통해 웹 애플리케이션의 성능을 극대화 했다.
기존 사용자가 웹 페이지를 요청 할 때 빈번하게 발생하는 리플로와 리페인트로 성능 저하 문제가 발생됐다.
가상돔은 화면에 표시되는 돔 트리와 동일한 돔트리를 메모리 상에 만들고
돔 트리의 변경이 발생하면 메모리상에 생성한 가상 돔 트리에서 모든 연산을 한 후
실제 돔트리를 갱신하는 방식으로 리플로와 리페인트를 최소화 하였다.
-실제 돔의 가벼운 사본 같은 개념
이제 여기서 돔이라는 개념을 몰라서 돔에 대해 알아보기 시작
돔이란?
DOM(Document Object Model) 즉, 문서 객체 모델
웹페이지를 이루를 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
돔은 html과 자바스크립트를 서로 이어주는 역할을 하고 있다.
-문서 객체: html, head, body와 같은 태그들을 자바스크립트가 이용할 수 있는 (메모리에 보관할 수 있는)객체를 의미한다.
-트리 형 자료: 하나의 뿌리 node에서 시작 되는 형태
-node (노드): 트리 구조에서 root 노드를 포함한 모든 개개의 객체를 node라고 한다.
(ex. head body title script h1 등의 태그 뿐만 아니라 태그 안에 있는 텍스트나 속성 등도 모두 node에 속한다.)
다시 리액트의 가상돔으로 돌아와서,
[리액트가 가상돔을 반영하는 절차]
-
변화가 일어나면 변화 된 버전을 가상돔으로 바꾼다. (데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링 한다.)
-
가상돔끼리 비교한다. (변화전의 가상돔과 변화 된 가상돔을 비교한다.)
-
바뀐 부분만 적용한다. (바뀐 부분만 실제 돔에적용하여 레이아웃 계산을 한번만 한다.)
4) 선언형 프로그래밍
프로그래밍은 크게 명령형과 선언형으로 구분 된다.
명령형 프로그래밍은 그 값을 얻기 위해 어떻게 하는지에 집중하고 있고,
선언형 프로그래밍은 결과값이 무엇인지에 집중한다.
선언형 프로그래밍은 코드를 예측가능하게 하고 디버깅을 쉽게 할 수 있도록 한다.
5) 컴포넌트 기반
컴포넌트를 조합하여 페이지를 만든다. 반복적으로 재사용이 가능하다는 것이 장점.
