React 란?

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

JavaScript 기반의 라이브러리로서, 웹 애플리케이션의 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다.

페이스북에서 개발되었으며, 2013년에 처음으로 공개되었습니다.

 

1. Components 

UI를 작은 독립적인 조각인 컴포넌트로 분할하는 컴포넌트 기반 아키텍처를 채택하고 있습니다. 각 컴포넌트는 자체적으로 상태를 가지며, 상태가 변화하면 React.js는 효율적으로 UI를 업데이트합니다. 이러한 선언적 프로그래밍 모델은 개발자가 UI 업데이트를 처리하기 위한 복잡한 로직을 작성할 필요 없이, 상태의 변화에 따라 자동으로 UI를 갱신할 수 있도록 도와줍니다.

 

2.가상 돔(Virtual DOM)

Virtual DOM 개념을 사용하여 UI 업데이트를 최적화합니다. 가상 돔은 실제 돔(Document Object Model)과 유사한 구조를 가지며, React.js는 상태 변화가 발생할 때마다 가상 돔을 업데이트하고, 실제 돔과 비교하여 변경된 부분만 실제 돔에 반영합니다. 이를 통해 불필요한 UI 업데이트를 최소화하고 성능을 향상시킬 수 있습니다.

 

3. reusable 

사용하기 쉬운 문법과 컴포넌트 기반 설계로 인해 학습 곡선이 낮고, 유지 보수가 용이합니다. 또한 확장성이 뛰어나서 다른 라이브러리나 프레임워크와의 통합이 용이하며, 개발자들에게 편리한 개발 경험을 제공합니다.

요약하면, React.js는 간결하고 선언적인 문법, 효율적인 UI 업데이트, 그리고 컴포넌트 기반 아키텍처를 통해 웹 애플리케이션 개발을 쉽고 효율적으로 만들어주는 도구입니다.

---

Real DOM 과 Virtual DOM 차이

 

1.Real DOM

 웹 페이지의 실제 HTML 요소들을 나타냅니다.

 React.js에서는 Virtual DOM을 사용하여 UI 업데이트를 처리하고, 변경된 부분만 실제 돔에 반영합니다. 이는 전체 리스트를 다시 로드해야 하는 번거로움을 피할 수 있습니다.

 

2.가상 돔(Virtual DOM)

Virtual DOM은 Real DOM과 같은 properties들을 갖고 있으면 그냥 가볍게 Real DOM을 Copy한거라 보면 됩니다.

 

React.js에서의 렌더링 및 Virtual DOM 업데이트 과정:

1. JSX(HTML과 유사한 문법)을 렌더링:
   • JSX를 사용하여 컴포넌트의 UI 구조를 정의한다.
   • JSX는 React 컴포넌트의 가상 템플릿으로, JavaScript 코드 안에 HTML을 작성할 수 있게 해준다.
2. Virtual DOM 업데이트:
   1. 이전 상태와 비교하여 바뀐 부분을 찾기 위해 Virtual DOM을 사용한다.
   2. Virtual DOM은 가상의 메모리 상의 돔 트리로서, 실제 돔과 유사한 구조를 가지고 있다.
3. Diffing(차이 비교):
   1. 이전 Virtual DOM과 현재 업데이트된 Virtual DOM을 비교하여 바뀐 부분을 찾는다.
   2. 이 과정을 Diffing이라고 부른다.
4. Real DOM 업데이트:
   1. Diffing 결과로 바뀐 부분을 실제 돔에 반영한다.
   2. 변경된 부분만 실제 돔에서 수정되고, 나머지는 그대로 유지된다.
   3. 이로써 화면에 반영된다.
      
      

요약하면, React.js는 Virtual DOM을 사용하여 효율적인 UI 업데이트를 달성합니다.

변화가 발생한 부분만 감지하고 업데이트하므로 실제 돔을 직접 조작하는 것보다 효율적이고 빠른 UI 렌더링을 가능케 합니다