161. 리액트가 실제로 작동하는 방식

먼저 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다

리액트의 핵심은 "컴포넌트"이다

 

리액트는 웹을 모른다.

브라우저와는 전혀 관계가 없고 리액트는 어떻게 컴포넌트를 다루는지는 알고 있지만, 이러한 컴포넌트에 HTML 요소들이 포함되어 있는지 아니면 아예 허구적인 요소들이 있는지에 대해서는 상관할 것이 아니다

이는 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 것들이다

 

리액트는 컴포넌트를 관리하고 상태 객체를 관리하고 또한 다른 객체의 상태와 컴포넌트가 바뀌어야 하는지를 확인하고 컴포넌트의 변경 전후의 상태를 확인하는 라이브러리일 뿐이다

 

그리고, 리액트는 변경된 내용과 어떤 화면이든간에 화면에 표시되어야 할 정보 모두를 현재 사용중인 인터페이스에 전달한다. 예를 들어 리액트 DOM과 같은 것을 말한다. 
리액트 DOM은, 브라우저의 일부인 실제 DOM에 대한 작업을 하므로 사용자가 보고 있는 화면에 무언가를 표시하는 역할은 리액트 DOM의 몫이다.

앞서 말했듯, 리액트는 컴포넌트만 신경 쓴다.

또 리액트는 props를 관리하며, props는 컴포넌트에 전달하는 데이터로 컴포넌트 구성을 가능하게 해주고

부모-자식 컴포넌트간의 통신을 연결해준다.

컴포넌트 구성을 가능하게 해주고 부모-자식 컴포넌트간의 통신을 연결해준다. 그리고 리액트는 컴포넌트 내부의 데이터인 상태라는 것을 다룬다

 

 

앞서 말씀드렸듯이, 리액트는 컴포넌트를 다루며

최종적으로 리액트가 하는 역할이란 가상 DOM이라는 개념을 사용하는 것이라고 할 수 있다

이 가상 DOM은 앱이 마지막에 만들어내는 컴포넌트 트리를 결정한다

각각의 하위 트리를 갖고 있는 컴포넌트들은 JSX 코드를 반환하는데

이 가상 DOM은 컴포넌트 트리의 현재 모양과 최종 모양을 정한다

가령, 상태가 업데이트되면 이 정보는 리액트 DOM으로 전달되어 갱신 전후의 상태 차이를 인식하고 리액트가 컴포넌트 트리를 통해 구성한 가상 스냅샷인 가상 DOM과 일치하도록 실제 DOM을 조작하는 방법을 알 수 있게 한다

 

 

 

리액트가 컴포넌트 함수를 재실행하고 컴포넌트를 재평가한다고 했다. 

그리고 앞서 말씀드렸듯이 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재실행되어 리액트라 이를 재평가하게 된다. 하지만 이 재평가가 DOM을 다시 랜더링하는 것은 아님을 알아야 한다. 

리액트에 의해 컴포넌트 함수가 재실행된다고 해서 실제 DOM의 각 부분들이 다시 랜더링된다던가 재평가되는 것은 아니다.