리액트가 작동하는 방식

리액트가 작동하는 방식

리액트의 핵심은 컴포넌트라는 이며 우리는 사용자 인터페이스를 구축하기 위해 컴포넌트를 사용하고 리액트는 이 컴포넌트 개념을 사용한다.

즉 리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트 역시 컴포넌트를 통해 한다.

여기에서 중요한 개념이 하나 나오는데 React DOM이다.

React DOM은 웹에 대한 인터페이스이며 리액트는 어떻게 컴포넌트를 다루는지는 알고 있지만 리액트는 웹을 모른다.

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

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

React DOM은, 브라우저의 일부인 실제 DOM에 대한 작업을 하므로 사용자가 보고 있는 화면에

무언가를 표시하는 역할은 React DOM의 몫이다.

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

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

상태가 업데이트되면 이 정보는 React DOM으로 전달되어 갱신 전후의 상태 차이를 인식하고

리액트가 컴포넌트 트리를 통해 구성한 가상 스냅샷인 가상 DOM과 일치하도록 실제 DOM을 조작하는 방법을 알 수 있게 한다.

state나 props, context, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재실행되어

리액트가 이를 재평가하게 되는데 이 재평가가 DOM을 다시 랜더링하는 것은 아니다.

실제 DOM은 리액트가 구성한 컴포넌트의 이전 상태와 트리, 그리고 현재의 상태와의 차이점을 기반으로 변경이 필요할 때만 업데이트된다.

실제 DOM은 필요한 경우에만 변경되며 이 것은 성능 측면에서 매우 중요한데 이전과 현재의 상태를

가상으로 비교한다는 것은 간편하고, 자원도 적게 들기 때문이다.

실제 DOM을 사용하여 브라우저에 직접 렌더링하는 것은 성능 측면에서 자원이 많이 필요하게 되며실제 DOM을 그만큼 많이 사용하므로 페이지가 느려질 수 있다.

이렇게 리액트는 가상 DOM과의 비교를 통해 최종 스냅샷과 현재의 스냅샷을 실제 DOM에 전달하는 구조를 가지고 이것이 리액트가 작동하는 방식이다.

<div>
	<h1>title</h1>
</div>

마지막으로 컴포넌트 함수를 실행했던 시점이고 여기에서 상태가 변경되어 새로운 문장을 더 보여준다고 해보자.

<div>
	<h1>title</h1>
	<p>paragraph</p>
</div>

이 경우에서, 리액트는 이 두 스냅샷간의 차이점이 <p>태그 부분임을 확인하고 이를 리액트 DOM에 보고하면 리액트 DOM은 실제 DOM을 업데이트하고 새로운 태그를 집어넣는다.

h1이나 div 요소는 건드리지 않고 div 안의 h1 요소 다음에<p>태그만 추가한다.

이것이 백그라운드에서 리액트가 작동하는 방식이다.