리액트 핵심만 훑어보자 #4 엘리먼트

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

 

엘리먼트(Element)란 뭘까?

• 우리가 크롬 개발자도구를 통해 확인할 수 있는 Elements는 DOM 엘리먼트를 의미한다.
• DOM 엘리먼트란 브라우저에서 실제로 렌더링 된 HTML 요소이다. 
• 반면 리액트 엘리먼트는 화면에 나타나는 내용을 기술한 자바스크립트 객체를 일컫는다.
• DOM에 직접 표시되지 않는다. 다시 말해 렌더링 되지 않았다는 것이다.

 

리액트 엘리먼트 정의가 너무 추상적이라서 이해가 안 되는데?

/* JSON 형태
{
  type: 'button',
  props: {
    className: 'bg-green',
    children: {
      type: 'b',
      props: {
        children: '테스트용 텍스트 입니다!'
      } 
    }
  }
}
*/

// 리액트 엘리먼트를 생성하는 JSX 문법
<button className="bg-green">
  <b>
    테스트용 텍스트 입니다!
  </b>
</button>

• 상기 코드를 살펴 보자.
• JSON 형태로 주석 처리된 부분이 리액트 엘리먼트이다.
• 만들어진 리액트 엘리먼트는 아까 언급했듯 DOM에 표시되지 않은 상태이다.
• JSX 문법도 리액트 엘리먼트를 만들어 낸다.
   
• 엘리먼트 렌더링을 설명하기에 앞서, 리액트 엘리먼트 구조를 먼저 일부만 살펴보자.
• 엘리먼트의 type에는 HTML 태그명이 문자열로 들어갈 수 있지만 리액트의 컴포넌트가 들어갈 수도 있다.
• 이 말인즉슨, 하나의 컴포넌트는 여러 개의 자식 컴포넌트를 포함할 수 있다.
• 그리고 자식 컴포넌트를 쭉 분해하다 보면 결국 HTML 태그가 나올 것이다.
• 엘리먼트의 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 객체를 의미한다.
   
• 참고로 엘리먼트는 불변성이라는 중요한 특징을 가지고 있다. 즉, 한 번 생성된 엘리먼트는 변하지 않는다.
• 아직 이해 못 해도 괜찮다. 다만 엘리먼트는 수정되는 게 아니라 교체되는 것임을 알고 넘어가자.
   

엘리먼트 렌더링

• 가령 데이터가 갱신된다고 하자.
• 해당 시점에 Virtual DOM은 전체 UI를 리렌더링 한다. 쉽게 말해서 트리의 수정본 하나를 가져온다고 생각해도 된다.
• 그럼 이제 가져온 트리의 복사본과 기존 트리를 비교한다.
• 비교하고선, 바뀐 부분만 실제 UI에 반영하는 것이다. 정확히는 바뀐 노드의 자식 노드까지 UI에 반영된다.
• 아까 불변성을 언급했는데, 바뀐 부분을 UI에 반영한다는 것은 해당 엘리먼트를 수정하는 게 아니라 교체해 버린다는 것이
• 또, 화면이 갱신되는 횟수는 실제로 리액트를 통해 개발하는 과정에서 성능에 큰 영향을 미치는 요소이다.

 

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

• 상기 코드는 root DOM node라고 불리며, 모든 리액트 앱에 포함되는 필수적인 코드이다.
• 이 div 태그 안에 리액트 엘리먼트들이 실제로 렌더링 되는 것이다.
• 하나의 리액트 애플리케이션이 여러 개의 root DOM node를 갖게 될 수도 있다.

 

const element = <h1>텍스트</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

• render() 함수를 통해 root DOM node에 리액트 엘리먼트를 렌더링 하는 코드이다.

 

오늘도 실습 한 번 해보자

function Clock(props) {
    return (
        <div>
            <h1>현재 시간</h1>
            <h2>{new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock;

• Clock.jsx 파일을 생성하자.
• 단순히 현재 시간을 보여주는 코드이다. 이 컴포넌트 만으로는 화면이 단 한 번밖에 갱신되지 않을 것이다. 

 

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

reportWebVitals();

• 작성한 컴포넌트를 index.js에 포함시키자.
• 단 이번 실습에서는 setInterval() 함수를 통해 일정 시간마다 Clock 컴포넌트를 렌더링 한다.
• 그러면 Clock 컴포넌트 내 new Date().toLocaleTimeString() 값이 1초마다 갱신되면서 
• Clock 컴포넌트의 속성 값이 계속 바뀌게 되는데, 이때 리액트가 변경을 감지하고 반복적으로 렌더링을 하는 것이다. 

 

• 1초마다 화면이 갱신되면 실습에 성공한 것이다.

 

마치며

• 오늘 기억해야 할 건 많지 않다.
• 리액트는 변경 감지를 하고 변경사항이 존재하는 컴포넌트만 렌더링 한다.
• 관점을 달리하면 렌더링을 하고 싶을 경우 데이터에 변경을 주면 된다는 것이다.

 

리액트 엘리먼트 개념의 경우 작성하는 본인도 헷갈리는데 보시는 여러분들은 어떠실지 모르겠다. 😂
같이 공부한다는 느낌으로 봐주시면 좋을 것 같다. 

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io

What is Dom in React - javatpoint