[React] 3. React 엘리먼트 렌더링

3. React 엘리먼트 렌더링

 

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 엘리먼트 렌더링 (Component 이해 전 읽어보기) ] 입니다. : ) 

 

리액트 공식 문서, 자습서에서는 컴포넌트를 알아보기 앞서 엘리먼트 렌더링이라는 내용을 기술하고 있어,
이부분도 가볍게 살펴 보고 가려고 한다.

 

이번장은 거의 공식문서의 내용이 다이니, 해당 문서를 참고하는것도 좋을 것 같다.

https://ko.reactjs.org/docs/rendering-elements.html

 

 

1. 엘리먼트란?

 

 - 리액트에서의 가장 작은 단위 이다.
 - 화면에 표시할 내용을 기술 한다.

ex) 엘리먼트 예시

const element = <h1>hello, GodDaeHee!~</h1>;

 - 위의 예시에서 보듯, 우리가 예전에 사용하던 브라우저의 DOM 엘리먼트와는 다르게 일반 객체로 볼 수 있다. 
 - 쉽게 생각하면, 엘리먼트는 컴포넌트의 구성 요소이고, 반대로 컴포넌트를 엘리먼트로 구성되어 있다고 생각 할 수 있는데, 아직 컴포넌트를 알아보기 전이므로 간단히 이정도의 느낌이라고 생각하고 넘어가면 좋겠다.

 

2. 엘리먼트 렌더링 하기

 

- 다음과 같은 <div>가 있다고 생각 해보자.

ex) 루트 노드

<div id="root"></div>

 

 - 다음 엘리먼트를 위의 예시와 같은 div에 렌더링 해보려 한다.
ex) 엘리먼트

const element = <h1>hello, GodDaeHee!~</h1>;

 

 - 이때 모든 엘리먼트는 React DOM에서 관리하고, 루트(root)DOM 노드라고 부른다.
   (사실 컴포넌트에서 한번에 이해해도 되므로 간단히 그렇구나~ 하고 넘어가도록 하자.)

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

ex) 루트 노드에 엘리먼트 렌더링 하기

const element = <h1>hello, GodDaeHee!~</h1>;
ReactDOM.render(element, document.getElementById('root'));

예제) 공식 문서 CodePen에서 보기

https://ko.reactjs.org/redirect-to-codepen/rendering-elements/render-an-element

 

※ 이러한 원리로 엘리먼트를 생성하고 렌더링 하는데, 앞서 설명한 JSX를 사용한다면 이 작업을 바벨이 편하게 알아서 해석 해주게 된다.

https://goddaehee.tistory.com/295 

 - 아직 React.createElement 는 살펴보지 않았지만 지금 시점에 가볍고, 편하게 한번 리마인드하고 넘어가는것도 좋을 것 같다.

 

// 실제 작성할 JSX 예시
function App() {
	return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
	return React.createElement("h1", null, "Hello, GodDaeHee!");
}

 

 

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

 

- React 엘리먼트는 불변 객체 이다.
   즉, 엘리먼트 생성 이후 해당 엘리먼트의 자식, 속성 등을 변경할 수 없다는 얘기다.
   
 - 지금까지 알고 있는 방법으로 UI를 업데이트 하는 방법은
   새로운 엘리먼트를 생성하고, ReactDOM.render() 함수로 전달하는 방법 뿐이다.

ex) 공식문서의 예시를 살펴보자.

// setInterval() 콜백을 이용해 1초마다 ReactDOM.render()를 호출하여 갱신한다.
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

예제) 공식 문서 CodePen에서 보기

https://ko.reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element

 

4. 특징

 - 다음 페이지에서 React는 가상 돔을 사용하여, 변경된 텍스트 노드만 업데이트 한다고 하였다.

https://goddaehee.tistory.com/295

 

 - 개발자 도구를 이용해 다음 예시를 살펴보면 이를 확인할 수 있다.
 - 1초마다 전체 UI를 다시 그리도록 엘리먼트를 만들었지만 
   React DOM은 변경된 텍스트 노드만 업데이트 하는 것을 볼 수 있다.

https://ko.reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element

이미지출처) https://ko.reactjs.org/docs/rendering-elements.html

 - 이점이 가상돔을 사용 하는 특징 중 하나이니 이해하고 넘어가도 좋을 것 같다.