1. React를 사용해서 페이지를 렌더링 하기 위해서는 React와 ReactDom을 가져온다.
[index.html]
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='index.css'/>
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script src='https://unpkg.com/react@17.0.2/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/@babel/standalone/babel.min.js'></script>
<script src='index.js' type='text/babel'></script>
</html>
2. React.createElement 함수를 통해서 원하는 html 요소를 생성한다.
[index.js]
const span = React.createElement('h3', {
onMouseEnter: () => console.log('mouse enter')
}, 'TEST')
const button = React.createElement('button', {
onClick: () => {console.log('clicked')}
}, 'Click me')
createElement의 첫 번째 인자로는 html의 태그를 작성한다.
createElement의 두 번째 인자로는 props를 작성한다.
예를 들어, class = 'title' , onClick : () => {console.log('clicked')} 등 클래스, 이벤트, 스타일과 같은 props를 지정해줄 수 있다.
createElement의 세 번째 인자로는 innerText의 내용을 작성할 수 있다.
const button = React.createElement('button', {
onClick: () => {console.log('clicked')}
}, 'Click me')
이렇게 만든 버튼은 <button>Click me</button> 라고 볼 수 있고, click이벤트를 가지는 요소이다.
3. 원하는 장소에 ReactDom.render를 이용해 렌더링 한다.
[index.js]
const container = React.createElement('div', null, [span, button])
ReactDOM.render(container, root);
위에서 만든 span과 button을 포함하는 container를 생성한다.
생성한 container를 root 아래에 위치 시킨다.
createElement를 이용해서 만드는 것은 대부분의 개발자들이 하지 않는다.
이것보다 더 직관적이고 쉬운 방법이 있으니까
하지만 더 쉬운 방법도 결국엔 개념은 createElement를 활용한 방식이다.
따라서 다음시간에는 대부분의 개발자들이 사용하는 react의 방식대로 표현해볼 생각이다.
그리고 쉬운 방식이 결국에는 오늘 배운 createElement에 귀결되는 과정까지 살펴볼 계획이다.
Ref: https://nomadcoders.co/react-for-beginners
'JS > React' 카테고리의 다른 글
| React 공식문서 보기 - 3 (Component, props) (0) | 2024.03.14 |
|---|---|
| React 공식문서 보기 - 2 (JSX, 엘리먼트 렌더링) (0) | 2024.03.13 |
| React 공식문서 보기 - 1 (React 앱 만들기, Hello World) (0) | 2024.03.12 |
| React : component에게 인자 넘겨주기 - props (1) | 2024.01.11 |
| React에서 useState사용하기 (1) | 2024.01.07 |
