Elements의 정의와 생김새

• Elements : 리액트 앱을 구성하는 요소이다.

• 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들. 즉, 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라고 부르는 것.

• 리액트돔에 대해서 살펴보자.

• 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM엘리먼트가 되는 것이고 React의 Virtual DOM에 존재하는 엘리먼트가 React 엘리먼트가 되는 것이다.

• 정리하면 React 엘리먼트는 DOM 엘리먼트의 가상표현이다.

• 엘리먼트는

대입 연산자의 오른쪽 부분은 React의 createElement 함수를 사용하여 엘리먼트를 생성한다.

Elements의 생김새

1. 리액트 Elements는 자바스크립트 객체 형태로 존재한다.

2. 엘리먼트는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체이다.

3. 마음대로 변경할 수 없는 불변성이 있다.

이 버튼을 나타내기 위한 엘리먼트이다.

• 타입에 html 태그 이름이 문자열로 들어가는 경우 엘리먼트는 해당 태그 DOM 노드를 가르킨다.

  

• 이 엘리먼트가 실제로 렌더링 된다면 그림과 같은 엘리먼트가 된다.

이 자바스크립트 코드는 React의 컴포넌트 엘리먼트를 나타낸다. (자바스크립트 객체이다)

리액트 엘리먼트는 자바스크립트 객체로 존재한다. 그리고 이 객체를 만드는 역할을 하는 것이 createElement함수이다.

앞에서 createElement함수를 호출할 때, 3가지 파라미터를 넣었는데,

1. 첫 번째 타입: html 태그 이름이 문자열로 들어가거나 또 다른 React 컴포넌트가 들어가게 된다.

2. 두 번째 타입 : props(엘리먼트 속성)

3. 세 번째 타입 : children(html태그 자식엘리먼트)

confirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있다.

[내가 해석한 부분]

• ConfrimDialog return으로 Button color = 'green'을 Button props 속성으로 넣어주게 되는데

• 그렇게 되면 Button(green)이 들어가게 되고

• calssName = {bg-${props.color}}에 해당 값이 매핑된다.

• b태그 {props.children}에 들어간 것은 확인이다.

첫 번째 칠드런은 type이 html 태그 중 하나인 p 태그이기 떄문에 곧바로 렌더링이 될 수 있는 상태이다.

하지만 두 번째 type:은 Button(리액트컴포넌트)이다. 이 경우에는 버튼 컴포넌트의 엘리먼트를 생성해서 합치게된다.

[내가 해석한 부분]

• 배열로 관리한다는 점이 특이했다.

최종적으로

모든 컴포넌트들이 createElement를 통해서 엘리먼트로 변환된다는점을 잊지 말아야한다.

---

Elements의 특징과 렌더링하기

• 불변성
  • 리액트 엘리먼트는 불변성이라는 특징을 갖는다.
  • 즉, 불변성을 갖고 있다는 것은
    "한 번 생성된 엘리먼트는 변하지 않는다."
    "엘리먼트 생성 후에는 Children이나 Attribute를 바꿀 수 없다."

• 이렇듯 완성된 붕어빵은 엘리먼트 생성이 끝난 것이기 때문에 변경할 수 없다. (붕어빵 앙금을 바꿀 수 없는 것처럼)

• 이런 경우에는 기존 엘리먼트를 변경하는 것이 아니라, 새로운 엘리먼트를 만들면 된다. (새로운 엘리먼트를 만들어서 + 기존의 엘리먼트와 바꿔치기 하면 된다.)

오직 리액트만으로 만들어진 모든 웹사이트들은 단 하나의 루트 돔노드를 가진다.

루트 DIV에 실제로 리액트 엘리먼트를 렌더링 하기 위해서는 다음과 같은 코드를 사용한다.

const element = <h1>안녕, 리액트!</h1>; //jsx문법으로 앨리먼트를 만들면 그게 곧 React 요소가 됨
ReactDOM.render(element, document.getElementById('root'));//ReactDom의  render함수 사용
//React 요소를 실제로 화면에 렌더링하는 역할

• 엘리먼트 하나 생성하고 + 생성된 엘리먼트를 root div에 렌더링하는 코드이다.

• React DOM : virtual DOM에서 HTML을 생성하는데 필요한 라이브러리이다.

  • React DOM 에는 리액트 엘리먼트를 -> 브라우저에 "렌더링" 하는데 필요한 모든 도구가 들어가있다.

• React 엘리먼트와 DOM 엘리먼트는 다른 개념이다.

• React 엘리먼트는 React의 Virtual DOM에 존재한다.

• DOM 엘리먼트 : 실제 브라우저의 DOM에 존재한다.

결국 React 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정이다.

한 번 렌더링된 엘리먼트를 업데이트 하려면 어떻게 해야될까?

function tick() {
  const element = (
    <div>
    	<h1> 안녕, 리액트!</h1>
    	<h2> 현재시간: {new Date().toLocaleTimeString()}</h2>
	</div>
	ReactDom.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

새로운 엘리먼트를 생성해서 바꿔치기를 한다.