[리액트공부] 1. React 이해

리액트 이해

• 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
• 렌더링 : 사용자 화면에 뷰를 보여 주는 것.
  • 리액트 라이브러리는 데이터가 변할 때마다 새롭게 리렌더링하며 최적의 사용자 경험을 제공한다

초기 렌더링과 render 함수

• 컴포넌트가 어떻게 생겼는지 정의하는 역할
• HTML 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고, 작동은 어떻게 하는지 등에 대한 정보를 지닌 객체를 반환한다.
• 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다.

업데이트

• 뷰를 업데이트 할 때는 데이터의 변화에 따라 뷰가 변형되는 것처럼 보이지만 실제로는 새로운 데이터를 가지고 render 함수를 또다시 호출, 즉 새롭게 갈아끼우게 된다.

Virtual DOM

DOM (문서 객체 모델, Document Object Model) : XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스, 문서 구조를 객체로 표현하는 방법

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.
DOM은 결코 느리지 않지만 동적 UI에 최적화되어 있지 않아 요소 개수가 몇 백 개에서 몇 천 개가 된다면 효과적이지 못하다.

리액트는 Virtual DOM 방식을 사용해 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화하고, 효율적으로 진행한다.

Virtual DOM은 실제 DOM의 가벼운 사본과 비슷하다. 웹 브라우저의 실제 DOM을 업데이트할 때 리액트에서는 다음 절차를 밟는다.

• 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
• 이전 Virtual DOM과 현재 Virtual DOM의 내용을 비교한다.
• 비교 결과, 바뀐 부분만 실제 DOM에 적용한다.