리액트 정의

1. 페이스북에서 개발한 유저 인터페이스 라이브러리로써 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해준다.

-> 페이스북, 인스타그램, 넷플리스등 규모가 큰 서비스에서도 사용중

2. Virtual DOM이라는 개념을 사용하여 상태의 변화에 따라 선택적으로 UI를 Rendering하여 최소한의 DOM 처리로 Component들을 업데이트 할 수 있게 해줌

DOM vs Virtual DOM

• DOM이란?

1. DOM이라는 객체를 통하여 구조화된 문서를 표한하는 방법

2. 트리 형태로 되어있어 특정 노드를 찾거나, 수정, 제거, 삽입 할 수 있다.

- DOM 의 문제

• DOM은 동적 UI에 최적화 되어있지 않음(HTML 자체)

• 이전에는 자바스크립트나 제이쿼리를 사용하여 동적으로 동작하게 할 수 있었지만 웹 어플리케이션의 구조가 커지면서 DOM에 직접 접근하여 변화를 주다보면 성능상의 이슈가 발생한다.

• DOM 자체가 느리다기보다는 브라우저단에서 DOM의 변화가 일어나면 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고 웹페이지를 리페인트하는데 이 과정에서 시간이 허비됨

- Virtual DOM

• 최소한의 DOM 조작을 통하여 작업을 처리하는 방식을 고려함

• Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신 이를 추상화 시킨 자바스크립트 객체를 사용함. 일종의 DOM의 가벼운 사본이라고 볼 수 있음.

• React에서 데이터가 변하여 브라우저 상에서 실제 DOM을 업데이트할 때의 절차

-> 데이터가 업로드 되면 전체 UI를 virtual DOM에 reRendering -> 이전 virtual DOM에 있던 내용과 현재의 내용을 비교 -> 변경된 부분만 실제 DOM에 적용

- React 특징

• 동적인 웹 페이지를 만들 수 있음

• 지속해서 데이터가 변화하는 큰 어플리케이션을 구축하는데 용이함

• 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 하며 재사용을 통해 개발시간을 절약

• HTML, JS만 알아도 시작 가능

• 단방향 데이터 흐름

• Hooks란 것을 이용하여 컴포넌트의 상태를 쉽게 관리할 수 있다.

• SPA로서 화면 구성에 필요한 모든 HTML을 클라이언트가 가지고 있고 서버사이드에는 필요한 데이터를 요청하고 json으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠름