본문 바로가기

개발이야기

Learning React | 4장 ~ 5장

리액트 작동 원리

리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리이다. 

리액트 엘리먼트

HTML을 브라우저가 문서 객체 모델(Document Object Model)인 DOM을 구성하기 위해 따라야 하는 절차라고 간단히 말할 수 있다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어들이면 DOM 엘리먼트가 되고, 이 DOM이 사용자 인터페이스를 화면에 표시한다. 전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어졌다. 사용자가 페이지 사이를 내비게이션 함에 따라 브라우저는 매번 다른 HTML 문서를 로딩할 수 있었다. AJAX(Asynchronous JavaScript and XML)가 생기면서 단일 페이지 애플리케이션(Single Page Application)이 생겼다. 브라우저가 에이잭스를 사용해 아주 작은 데이터를 요청해서 가져올 수 있게 됨에 따라 이제는 전체 웹 애플리케이션이 한 페이지로 실행되면서 자바스크립트에 의존해 사용자 인터페이스를 갱신하게 됐다. 

 

SPA에서 처음에 브라우저는 HTML 문서를 하나 적재한다. 사용자는 사이트를 내비게이션하지만 실제로는 같은 페이지 안에 계속 머문다. 자바스크립트는 사용자가 애플리케이션과 상호작용하는 것에 맞춰 표시중이던 인터페이스를 없애고 새로운 사용자 인터페이스를 만든다. 

 

DOM API는 브라우저의 DOM을 변경하기 위해 자바스크립트가 사용할 수 있는 객체의 모음이다.

 

리액트는 브라우저 DOM을 갱신해주기 위해 만들어진 라이브러리이다. 리액트가 모든 처리를 대신해주기 때문에 더 이상 SPA를 더 효율적으로 만들기 위해 여러 복잡한 내용을 신경쓸 필요가 없다. 리액트 코드로 DOM API를 직접 조작하지 않는다. 대신 리액트에게 어떤 UI를 생성할지 지시하면, 리액트가 우리 명령에 맞춰 컴포넌트를 렌더링해준다. 

 

브라우저의 DOM이 DOM엘리먼트로 이뤄지는 것처럼, 가상 DOM은 리액트 엘리먼트로 이루어진다. 리액트 엘리먼트는 개념상 HTML 엘리먼트와 비슷하지만 실제로는 자바스크립트 객체이다. 리액트 엘리먼트는 실제 DOM API를 직접 다루는것보다 자바스크립트 객체인 가상 DOM을 직접 다루는 편이 훨씬 더 빠르다. 우리가 가상 DOM을 변경하면 리액트는 DOM API를 통해 그 변경 사항을 가장 효율적으로 렌더링해준다. 브라우저의 DOM은 DOM 엘리먼트로 이뤄진다. 마찬가지로 React DOM은 리액트 엘리먼트로 이루어진다. DOM 엘리먼트와 리액트 엘리먼트의 겉모습은 비슷해 보일지 몰라도 그 실체는 꽤 다르다. 리액트 엘리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생겨야 하는지를 기술한다. 다른식으로 말하자면 리액트 엘리먼트는 브라우저 DOM을 만드는 방법을 알려주는 명령이다. 

 

리액트 엘리먼트는 단지 리액트에게 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트 리터럴에 불과하다.

{
	$$typeof: Symbol(React.element),
    "type": "h1",
    "key": null,
    "ref": null,
    "props": {id: "recipe-0", children: "구운 연어"},
    "_owner": null,
    "_store": {}
}

 

리엑트 엘리먼트의 type 프로퍼티는 만들려는 HTML이나 SVG 엘리먼트의 타입을 지정한다. props 프로퍼티는 DOM 엘리먼트를 만들기 위해 필요한 데이터나 자식 엘리먼트들을 표현한다. children 프로퍼티는 텍스트 형태로 표시할 다른 내부 엘리먼트이다. 

ReactDOM

ReactDOM에는 리액트 엘리먼트를 브라우저에 렌더링하는데 필요한 모든 도구가 들어있다. ReactDOM에는 render 메서드가 들어있다.