React.CreateElement?
- 리액트에서는 document.createElement를 쓰지 않습니다. 비슷하게 생겼고 유사성도 있지만 같지는 않죠. 뭐가 다른건가 알아보겠습니다.
반환값
- document.createElement의 경우, DOM요소를 반환합니다. 예를 들어 div라던가 span이라던가 h1등이 될 수 있겠죠. 반면에, React.craetElement는 DOM요소를 대표하는 객체를 반환해줍니다. 그 객체는 이렇게 생겼습니다.
const element = React.createElement("div");
// 위 element는 밑의 객체를 반환합니다.
{
type : 'div',
props : {}
}이렇게 React.createElement가 DOM요소 그 자체가 아닌 객체를 반환하는 이유는, 리액트가 가상 DOM을 실행하기 때문이죠. 여기서 가상 DOM이란, UI가 메모리에 저장된 채로 DOM과 동기화 되는 형태라고 생각하시면 됩니다. 객체를 반환하는 것으로 인해, 가상 DOM을 실현시키기고, 이것으로 인해 퍼포먼스의 최적화를 기대할 수 있습니다.
쓰는 방법
- React.createElement를 쓰는법은 다음과 같습니다.
React.createElement("div",{className : "Velog", style : "color" : "blue"}, "Velog is great")1번째 인자로는 만들고 싶은 태그 요소를 입력하고, 2번 째인자에는 className으로 클래스를, style로 스타일을 지정할 수 있습니다. 3번째 인자에는 텍스트를 입력할 수 있습니다. 만약 스타일을 지정하고 싶지 않다면 그냥 {} 빈 객체로 두거나, null 을 넣어서 생략할 수 있습니다.
물론, 이 방법이 더럽고 별로 효과적이지 않다 생각할 수 있습니다. 나중에 위 코드는
<div>Velog is great</div>이러한 JSX로 바뀔겁니다만, JSX는 HTML과 똑같지 않기 때문에 먼저 React.createElement를 배워서 JSX의 원래 모습을 알 필요가 있습니다.
요약
- 리액트 요소는 제일 작은 하나의 블록이고, 이 조그마한 조각이 UI의 한 부분이 된다.
- React.createElement는 React요소를 반환한다.
- React.createElement("태그타입","옵션(클래스,스타일),"텍스트")
DreamingCoder