[JavaScript/ React] React

React에서 Virtual Dom을 뭐라고 설명할까요?

공식 문서를 확인해보면 

UI의 가상적인 표현을 메모리에 저장하고, React Dom과 같은 라이브러리에 의해 실제 Dom과 동기화

라고 되어있습니다.

 

또한 공식문서를 확인해보면 JSX라는 용어가 눈에 보입니다.

https://ko.legacy.reactjs.org/docs/hello-world.html

Hello World – React

Hello World다음으로 보이는 JSX

그만큼 중요하다는 말이겠죠? 

 

JSX는 JavaScriptXML의 약자입니다.

즉 JavaScript 확장 문법이라보시면 됩니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

위 코드는 JSX로 작성된 코드입니다. 언듯 보면 HTML태그처럼 생겼죠?

위처럼 컴포넌트를 리턴시키게 되면 Babel은 JSX를 React.createElement() 호출로 컴파일합니다.

즉, 위 코드는 아래와 같은 형태가 되게 됩니다.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

위에서 React.createElement로 생성된 element는 객체로 표현이 가능합니다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위 모습 바로 이전 글에서 언급된 Virtual Dom객체의 구성형태와 비슷합니다.

 

이것으로 우리가 알수있는것은 React element는 Dom요소의 가상버전으로 3가지 특성이 존재하다는것 알수있습니다.

1. 가볍다.

2. 상태를 가지지 않는다.

3. 불변성을 유지한다.

위 특징의 3번째 특징으로 비교도하고, 업데이트 하는것이 쉬워지는 것입니다.

 

React element는 React Dom의 Render에 의해 실제 Dom의 요소가 됩니다.

React는 객체를 읽고, 읽은 객체를 사용해 Dom을 구성하여 항상 최신상태를 유지합니다.

 

 

그럼 다음에는 React element는 변경이 불가하다는데, 어떻게 요소의 데이터가 바뀌었다해서 자식이나 속성을 변경할수있을지 알아보겠습니다.