1. 과거 프론트엔드의 라이브러리 & 프레임워크

• 과거 단순 정적 웹페이지를 만들려면, javascript 없이 html과 css만 있으면 된다.
• 동적 웹페이지를 만들기 위해서 javascript와 Jquery가 등장하였다. 그러나 프로젝트 규모가 커지고 다양한 인터페이스가 추가가 되면서 관리(유지보수)하기 매우 힘들어졌다.
• DOM 관리 최소화 / 오직 기능 개발 / 사용자 인터페이스 구현 집중 ... 이렇게 구분되고 체계적으로 개발 할 수 있도록 여러 라이브러리와 프레임워크들이 등장했다.
• 등장한 라이브러리 / 프레임워크 : Angular / Vue / React

2. React

• React는 뷰를 위한 라이브러리다.
• javascript 프레임워크랑 다르게 뷰에 집중한다.
• MVC형태가 아닌 뷰 단을 조작하는 라이브러리이다.
• DOM(문서 객체 모델)객체의 갱신 및 이벤트 응답에 관심이 있는 라이브러리

3. React 특징

1) JSX [javascript XML] 언어
2) 단 방향 데이터 흐름 [SPA]
3) Virtual DOM
4) 컴포넌트 기반 라이브러리

1) JSX [javascript XML]

• JSX : 자바스크립트 안에서 HTML문법을 사용하여 view를 구성할 수 있게 해주는 자바스크립트 문법
• JSX는 자바스크립트 안에서 HTML 문법을 사용하여 VIEW를 구성할 수 있게 도와줌
• HTML 마크업 문법을 그대로 사용
  
• Javascript 내에서 그대로 사용
  

2) 단방향 데이터 흐름

양방향 바인딩

• 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜주는 형태
• 이런 변화시키는 과정이 복잡한 과정이다.(리액트에서 이를 해결하기 위한 것이 Virtual DOM)
• 반면 양방향 데이터 흐름일 경우에 데이터는 view나 model로 변한다. 즉, Data가 UI를 변경시키는 것이다.

단방향 바인딩

• 단방향 데이터 흐름이란, 데이터는 항상 일정한 장소에 위치해있고, 그 장소에서만 변경이 가능하다.
• UI가 Data를 변경시킬 수는 없다.
• React는 이러한 양방향 바인딩이 아니기 때문에 실행 부 자체 내에서 데이터 변화를 감지하지 않는다.
• 데이터 변화가 오면 특정 함수를 실행시켜 DOM 객체를 갱신하여 성능 저하 없이 DOM 객체를 갱신한다.
• 전체 DOM 갱신에는 처리하는 시간이 늦기 때문에, React는 데이터를 비교하여 최소한 요소만 변경하도록 한다.

3) Virtual DOM

DOM : 문서 객체 모델 : HTML 단위 하나하나를 개체로 생각한 모델

• HTML 수정 시, 랜더트리 재생성 (모든 요소들의 스타일을 다시 계산) + 레이아웃 만듬 + 페인팅
• SPA(Single Page App) 개발 할 경우, DOM의 요소를 많이 수정할 경우 불필요한 연산이 반복 됨.

Virtual DOM :

• 가상의 DOM. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, JavaScript로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳만 업데이트 함.
• 변화를 가상 돔에서 미리 인지하고 변화 시킴
• 실제 돔이 아니므로 렌더링하지 않아 비용이 적음
• 가상 돔의 변화를 마지막에 실제 돔에게 던져준다. 모든 변화를 한번에 렌더링 된다.
• 가상 돔은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시킨다.
• 실제 돔을 직접 변경할 수 있으나, 그 작업이 비싸다. 가상 돔에서 미리 최적화를 한 번 해준다는 것.

Virtual DOM 내용

• 데이터 단을 담당하는 모델(M), 사용자 화면 (V), 이벤트 처리 해주는 컨트롤러(C)이 있다.
  프레임워크들의 모델은 대부분 양방향 바인딩을 통하여 모델에 있는 값이 변하면 뷰에서도 변함.
  문제는 특정 이벤트가 발생 했을 때, 모델에 변화를 일으키고, 변화에 따라 DOM을 가져와 뷰를 업데이트 시킴
  여기서 나온 것이.. 데이터가 바뀌면 뷰를 날리고 새로 만들어버리는 것
  뷰를 새로 만들어버리면 성능적으로 엄청난 문제가 발생한다. 그래서 가상 돔이 나옴.
  가상 돔은 변화가 일어나면 실제 브라우저의 돔에 새로운 것을 넣은 것이 아니라, 자바스크립트로 이뤄진 가상돔에 한번 렌더링을 하고, 기존 DOM과 비교를 한 다음에 변화가 필요한 곳에 업데이트를 해준다.
  가상 돔을 사용하므로서, 데이터가 바뀌었을 때 더 이상 어떻게 업데이틀 할 지를 고려하는 것이 아니라
  바뀐 부분을 찾아 바꿔준다.