[React 공식 Doc 가이드 #4] Rendering Elements

- 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다.

- Element

여태까지 간단한 element를 선언하고, 이를 Hello, world를 표현하는데 사용하였다. element란 무엇인가?

 

element란 screen 에서 출력하는 바를 묘사하는 것이 element 라고 정의하고 있다. DOM element 와 다르게 React element는 plain object 라서 만드는데 비용이 싸다. 

 

React DOM은 DOM 을 변경할 때 React element 와 비교하여 DOM 을 업데이트 한다.

---

- Component vs Element

일반적으로 element 와 component를 헷갈려 한다. element는 component를 구성하는데 사용된다.

---

- Element rendering

우리가 처음에 index.html 을 열었을 때, <div id="root></div> 가 선언되어 있었다. 이를 고치지 않고 index.js 에서 ReactDOM.render 에서 element에 해당하는 부분을 고치면서 예제를 작성해왔다. 흔히들 이 div를 "root" DOM 이라고 부르는 이유는 그 안에 모든 요소들은 React DOM 에 의해 관리되기 때문이다.

 

만약 Application을 구성할 때, 아예 기술 표준을 React로 잡고(이미 존재하는 Project에 React를 병합하지 않고) 사용한다면 root DOM 노드는 1개 이어야 한다. (만약 이미 존재하는 Project에 React를 사용한다면 하나의 분리된 root DOM 선언해야 할 것이다.)

 

우리가 Hello, world 예제에 사용한 아래 코드는, "root DOM 노드에 React element를 rendering 하라"는 의미이다.

---

- 이미 Rendering이 완료된 Element Update 하기

React element는 immutable 이다.

 

immutable 이란 생성되고 난 뒤에 상태를 변경할 수 없다는 의미이다. React 만 국한해서가 아니라 Coding 관련된 책들, 다른 문서들을 찾아봐도 immutable 이란 말을 자주볼 수 있다. 상태를 변경할 수 없어야 멀티 쓰레드 환경같은 곳에서 문제를 일으키지 않고, client(여기에서는 client가 프로그램을 사용하는 사람이 아니라, 다른 사람이 제작해놓은 API 같은 것을 사용하는 코더 혹은 요청하는 쪽 프로그램)에게 일관적인 결과를 Return 해준다고 보장시켜 줄 수 있다. immutable도 심오하니 더 알고싶은 사람은 다른 레퍼런스 참조.

 

위의 immutable 에서는 일반적인 의미이고, React 공식 문서에서는 React 에서 immutable을 다음과 같이 설명하고 있다.

일단 element를 생성하고 나면 해당 element 의 자식이나 attribute 들을 변경 할 수 없다. 마치 영화에서의 1 프레임과 같아서 특정 시점에서의 UI를 표현하는 것과 같다. UI를 갱신하는 유일한 방법은 새로운 element를 생성하고, 그것을ReactDOM.render() 의 parameter로 넘기는 것이다.

위에 결과화면에서 시간은 1초 마다 갱신된다.

 

immutable이 좋은 것도 알겠고 결과도 1초마다 갱신되는건 알겠는데, 계속 새로운 element를 만들면 컴퓨터 메모리가 안녕할 것인가 라고 생각해 봐야 한다. 친절하게도 공식문서에서는 이런것도 설명해준다.

 

실질적으로 대부분의 React app 들에서는 ReactDOM.render()를 1번만 호출한다. 면서 결론을 알려주고 다음섹션에서 알려준다고 한다. 

---

- React 는 필요한 부분만 Update 한다.

React DOM은 element와 그의 자식들을 이전시점의 상태와 비교해서 필요한 부분만 업데이트 한다. 이전 예제에서 개발자도구를 열어보면 아래처럼 시간부분만 변경되는 것을 볼 수 있다.

함수에서 우리는 UI 전체 element를 생성했지만, ReactDOM에 의해서 변경되는 부분의 내용만 바뀐다.