React란?

Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리로서, 사용자 인터페이스를 구축하기 위해 사용된다.

React의 기술적인 특징

1. 컴포넌트를 기반으로 UI를 표현한다.
2. 화면 업데이트 구현이 쉽다.
3. 화면 업데이트가 빠르게 처리된다.
   
   

1. 컴포넌트를 기반으로 UI를 표현한다.

페이지의 모든 요소를 컴포넌트라는 단위로 모듈화해서 개발하기 때문에 여러 페이지에서 공통으로 사용되는 요소가 필요할 때 필요한 컴포넌트를 만들고 불러와서 사용한다. 이와 같이 사용하면 좋은 점은 중복 코드가 발생 하지 않고, 재사용할 수 있게 만들 수 있어서 유지보수가 쉽고 확장하기 용이한 코드를 작성할 수 있다.

2. 화면 업데이트 구현이 쉽다.

여기서 업데이트란?
사용자의 이벤트에 따라 웹페이지가 스스로 모습을 바꿔 상호작용하는 것을 말한다.

React는 선언형 프로그래밍이다.

선언형 프로그래밍이란?
과정은 생략하고 목적만 간결히 명시하는 방법 (코드가 간결함)

페이지를 컴포넌트 단위로 개발하게 되는데 컴포넌트에는 state(상태) 현재 상태를 저장하는 변수를 저장할 수 있다. state의 값이 바뀌면 컴포넌트가 바뀐 state 값에 따라 각각 다른 UI를 화면에 렌더링 하도록 설정할 수 있다.

3. 화면 업데이트가 빠르게 처리된다.

자바스크립트로 DOM을 수정해서 업데이트를 구현할 때 DOM 수정 횟수를 최소화 해야 되기 때문에
다양한 업데이트들이 있을 때 한 번 한 번 다 수정시키도록 만드는 게 아니라 어딘가의 변수라든지 등등의 장소에 업데이트들을 다 모아두었다가 한 번만 DOM을 수정할 수 있도록 각별히 신경을 써줘야 한다.

위에 설명한 이러한 작업을 리액트는 자동으로 처리해 준다. (Virtual DOM)
그렇기 때문에 우리가 리액트를 쓸 때는 아무리 많은 업데이트를 동시에 발생시킨다고 하더라도 대부분의 상황에 충분히 빠르게 업데이트를 구현할 수 있도록 도와준다.

Virtual DOM(가상 돔) 이란?

• 실제 돔과 같은 내용을 담고 있는 복사본이라 생각하면 된다. 복사본은 실제 돔이 아닌 자바스크립트 객체 형태로 메로리 안에 저장되어 있다.
• 리액트는 두 개의 가상 돔을 갖고 있다.
  - 첫 번째 가상 돔은 변경 이전의 내용을 담고 있다.
  - 두 번째 가상 돔은 변경 이후에 보여질 내용을 담고 있다.
• 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상 돔을 비교해서 정확히 어떤 부분이 바뀌었는지 비교하여 파악한다. 그리고 이러한 과정을 Diffing이라고 부른다.
• Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로 실제 DOM에 한 번에 적용시켜 준다. 그리고 이러한 과정을 Reconsiliation, 재조정이라고 한다.

참고

https://ko.legacy.reactjs.org/
https://www.youtube.com/watch?v=gc-kXt0tjTM