[React] 엘리먼트 렌더링 - tick 만들기

★ 엘리먼트

- 엘리먼트는 화면에 표시할 내용을 기술하는 React앱의 가장 작은 단위이다.

  브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이고, 쉽게 생성할 수 있다. 

   React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. 

---

★ DOM에 엘리먼트 렌더링하기

HTML 파일에 <div>를 만들어 보았다.

이 안에 들어가는 모든 앨리먼트를 ReactDOM에서 관리한다. 이것을 "루트 (root)"DOM 노드라고 부른다.

 

"루트 (root)"DOM 노드 : ReactDOM에서 관리하는 모든 앨리먼트.

 

React로 구현된 애플리케이션은 하나의 루트 DOM노드가 있다. 

React를 기존 앱에 통합하려는 경우, 원하는 만큼 많은 수의 독립된 루트 DOM노드가 있을 수 있다.

 

React 앨리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 된다.

 

- "루트 (root)"DOM 노드에 Hello,wold! h1태그를 넣어준다.

-  ReactDOM.render에 엘리먼트를 전달해준다.

 

그럼 뙇!! 이렇게 Hello, world! 가 뜬다.

아직 개발 이 세계에서 이방인인 나는 이 헬로우 월드를 많이 보는데, 철수와 영희 같은 예시인가보다.

엄청 많이 보고있다.

 

---

★ 렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변객체이다. 생성 그 후, 그 상태를 바꿀 수 없는 객체라는 것이다.엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.

엘리먼트는 영화에서 하나의 프레임 = 특정 시점의 UI 이라고 생각하면 된다.

 

그럼, 이 UI를 업데이트하는 유일한 방법은 무엇일까?

바로, 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것이다.

 

예시로 똑딱거리는 시계 tick을 만들어보겠다.

 

1. Date 앞에 new를 입력한 이유는 new는 새로운 객체 생성을 의미한다. 

   new 연산자를 통해 함수를 호출하면, 암묵적으로 빈 객체를 만들어 tick 함수에 전달한다.

 

   toLocaleTimeString()은 특정 자료가 들어왔을 때, 설정해놓은 지역에서 읽는 형태로 바꿔주는 함수이다.

   여기서는 Date가 들어왔으므로, 설정한 지역에서 읽는 날짜 형태로 바꿔준다. 

   만약 number가 들어온다면, 숫자를 1000단위로 끊어줘서 화폐단위를 손쉽게 바꿔줄 수 있다.

 

2. setInterval 함수는 일정한 시간 간격으로 작업을 수행하기 위해서 사용한다. 

   clearInterval을 사용하여 중지할 수 있다. 우리는 1초 간격으로 리셋되는 것을 원하기 때문에 1000을 입력해준다.

 

그럼 이렇게 내가 있는 한국 방식으로 시간이 1초마다 바뀌게 된다. 

 

 

---

★ 변경된  부분만  업데이트하기

ReactDOM은

해당 엘리먼트, 그 자식 엘리먼트 vs 이전 엘리먼트 이렇게 비교하고,

DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

 

출처 : react 공식 사이트

react 공식 사이트에서 보여준 개발자 도구 짤을 보겠다.

 

매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만, ReactDOM은 내용이 변경된 텍스트 노드만 변경했다.

이런 접근법은 시간의 변화에 따라 UI가 어떻게 변화할지 고민하는 것보다 더 많은 수의 버그를 없앨 수 있다고 React 사이트에서 자랑했다. 맞다. 좋은 것 같다. React 나를 피곤하게 하지만 최고!!!