[React] 리액트 동작 원리

🥕 Hello React

React는 UI를 만들기 위한 JavaScript 라이브러리입니다.

React는 스스로 상태를 관리하는 캡슐화된 컴포넌트를 조합해 복잡한 UI를 만들 수 있도록 지원하며, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

🥕 React의 원리, 특징이 무엇인가요?

React는 상태 변화에 따른 UI 변경점을 결정하기 위해 재조정(Reconciliation)이라는 알고리즘을 사용하며, 이를 구현하기 위해 Virtual DOM이라는 패턴을 사용하였습니다.

또한 React 16부터 React Fiber엔진을 사용하여, 리액트의 Reconciler를 정비하였습니다.

React의 큰 특징으로는 Virtual DOM 개념과, 단방향 데이터 바인딩이 있습니다.

Virtual DOM은 Real DOM의 in-memory 표현으로, UI 표현은 메모리에 저장되며, Real DOM과 동기화됩니다.

단방향 데이터 바인딩은 간단히 설명하면, HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때, JS의 데이터가 수정되도록 바인딩하는 방법은 제공하지 않는 방법입니다.

 

** 재조정이란?

  리액트는 컴포넌트에서 prop이나 state가 변경될 때, 직전에 렌더링된 요소(element)와 새로 반환된 요소를 비교하여 실제 DOM을 업데이트 할지 말지 결정해야 합니다. 이때 두 element가 일치하지 않으면 리액트는 새로운 요소로 DOM을 업데이트 하는데, 이러한 프로세스를 reconciliation이라고 합니다.

🥕 Virtual DOM 작동 원리에 대해 설명해주세요.

Virtual DOM의 뒤에는 재조정(Reconciliation) 알고리즘이 있습니다.

React는 재조정과 렌더링이 별개의 단계가 되도록 설계되었습니다.

Reconciler는 트리의 어떤 부분이 변경되었는지 계산하고, 이후 Renderer는 계산된 정보를 앱을 실제로 업데이트하는 데 사용합니다.

그리고, Fiber를 이용하여, 리액트 컴포넌트에 특화되도록 stack을 재구성하였습니다.

이를 통하여 stack frame을 메모리에 보관하고, 원하는 경우 언제든지 실행할 수 있도록 만들었으며, 이를 통해 스케줄링 목표를 달성하고자 하였습니다.

Fiber를 도입하며 모든 업데이트를 즉시 적용하는 것이 아닌, 더 우선순위가 높은 업데이트를 먼저 완료할 수 있게 되었습니다.