index.html
<html>
<head>
<title>동찬의 로그</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>동찬의 로그</h1>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js" crossorigin></script>
<!-- 리액트 컴포넌트 가져오기 -->
<script src="Mybutton.js"></script>
</body>
</html>
style.css
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
);
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
Mybutton.js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
);
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
- const domContainer = document.querySelector('#root');
무엇을 하나요?
HTML에서 id="root"를 가진 DOM 요소를 선택합니다.
React가 컴포넌트를 렌더링할 위치를 지정하는 것입니다.
결과
domContainer는 를 참조하는 변수입니다. - React.createElement(MyButton)
무엇을 하나요?
React.createElement는 React 컴포넌트를 생성합니다.
여기서는 MyButton 컴포넌트를 호출하여 React 엘리먼트를 생성합니다.
React 엘리먼트는 화면에 표시할 UI 구조를 정의한 자바스크립트 객체입니다. - ReactDOM.render(React.createElement(MyButton), domContainer);
무엇을 하나요?
ReactDOM.render는 React 엘리먼트를 실제 DOM에 렌더링합니다.
첫 번째 인자: 렌더링할 React 엘리먼트입니다. 여기서는 React.createElement(MyButton)으로 생성된 엘리먼트입니다.
두 번째 인자: React 엘리먼트를 렌더링할 대상 DOM 요소입니다. 여기서는 domContainer입니다.
결과
React가 MyButton 컴포넌트를 #root에 렌더링하고, 사용자는 브라우저에서 이를 볼 수 있습니다.
흐름을 간단히 정리하면
#root라는 DOM 요소를 선택합니다.
React로 MyButton 컴포넌트를 만듭니다.
ReactDOM이 이를 #root DOM 요소에 렌더링합니다.
