Rendering Elements

react의 element란?

React 앱을 구성하는 가장 작은 블록들을 엘리먼트 라고 한다.

엘리먼트는 우리가 화면에서 보는 것들을 기술하는데, 기술한 내용을 토대로 실제 화면에서 보이는
DOM 엘리먼트가 만들어지게 된다.

// 이 코드가 실행될 떄, 오른쪽 부분은 create Element를 이용해 생성 된다.
const element = <h1>Hello, world</h1>;

React 엘리먼트는 JS 객체 형태로 존재하고, 한번 생성되면 바꿀 수 없다.

react elements의 특징

immutable 변경할 수 없는, 불변성을 가지고 있다.

한번 생성된 엘리먼트는 변하지 않는다.
엘리먼트 생성 후에는 children이나 attributes를 변경할 수 없다.

그럼 화면 갱신이 안되는게 아닌가?
기존 엘리먼트는 변경할 수 없으니 엘리먼트를 새로 만들어 바꿔준다.

• 컴포넌트는 틀, elements는 그 결과물
  이미 구워진 붕어빵의 속을 바꿀 순 없다.

엘리먼트는 화면에 보여지려면 렌더링 과정이 필요하다.

아무튼 그럼 어떻게 새로운 엘리먼트를 바꿔줄까?

tick 함수는 현재시간을 포함하고 있는 엘리먼트를 생성해, root div에 렌더링 하는 역할을 한다.

그리고 js의 setInterval을 이용해 1000밀리초 마다 tick 함수를 호출하고 있다.

즉, 1000밀리초 마다 기존의 엘리먼트와 새로운 엘리먼트가 변경되고 업데이트를 한다.