리액트 없이 리액트 만들어보기 대작전.
일단 리액트 없이 하드 코딩된 버전으로 “Hellow”를 브라우저에 띄어 봅시다.
만약 리액트 16.8 버전 기준 리액트 코드를 DOM으로 렌더링을 한다면 아래 코드처럼 많이 작성했을 거예요.
(리액트 18 버전에서는 createRoot(element). render() 사용)
const ReactDOM = {}; // import 했다고 가정합시당. 🥰
const element = <h1 title='foo'>Hello</h1>;
const container = document.getElementById('root');
ReactDOM.render(element, container);JSX 코드 변환해 주기
const element = <h1 title='foo'>Hello</h1>; 이 부분은 바벨이 자바스크립트 코드로 변환해 줍니다.
React.createElement를 사용해서 말이죠. 바벨에 의해 아래처럼 코드가 변환될 거예요.
const ReactDOM = {};
const element = React.createElement('h1', { title: 'foo' }, 'Hello');
const container = document.getElementById('root');
ReactDOM.render(element, container);하지만 우리는 바벨은 리액트를 사용 안 할 거니 createElement 함수의 결과물을 하드코딩 합시다. 그러면
아래처럼 변환됩니다.
여기서 type, props가 나오네요. type는 document.createElement()로 만들 태그 이름이고, props는 우리가 알던 props를 넘겨주네요!
const ReactDOM = {};
const element = {
type: 'h1',
props: {
title: 'foo',
children: 'Hello',
},
};
const container = document.getElementById('root');
ReactDOM.render(element, container);
React.Render 하드코딩
element를 하드코딩한 이후 React.render도 하드코딩 해줍시다.
const ReactDOM = {};
const element = {
type: 'h1',
props: {
title: 'foo',
children: 'Hello',
},
};
const container = document.getElementById('root');
//ReactDOM.render(element, container)
const node = document.createElement(element.type);
node['title'] = element.props.title;
const text = document.createTextNode('');
text['nodeValue'] = element.props.children;
node.appendChild(text);
container.appendChild(node);
브라우저에 띄우기
이렇게 index.js를 작성한 다음 브라우저에 띄워보면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./index.js" defer></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
아래처럼 “Hello”가 나타나는 것을 볼 수 있어요.
다음 게시물에서 React.createElement, React.render의 하드 코딩된 결과물을 함수로 만들어서 렌더링 되도록 해보겠습니다.
전체 js파일 코드
const ReactDOM = {};
const element = {
type: 'h1',
props: {
title: 'foo',
children: 'Hello',
},
};
const container = document.getElementById('root');
//ReactDOM.render(element, container)
const node = document.createElement(element.type);
node['title'] = element.props.title;
const text = document.createTextNode('');
text['nodeValue'] = element.props.children;
node.appendChild(text);
container.appendChild(node);