이 포스트는 노마드 코더의 <ReactJS로 영화 웹 서비스 만들기> 강의의 Events in React를 정리한 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
<!-- react cdn을 불러옴 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
const root = document.getElementById("root") // find root
const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world");
const button = React.createElement("button", {
onClick: ()=>{
console.log("clicked")
},
style:{
backgroundColor:"red"
}
}, "Click me");
const div = React.createElement("div", null, [span, button])
ReactDOM.render(div, root); // render span into root
</script>
</body>
</html>앨리먼트 생성하기
실제로는 잘 사용되지 않는 방법이지만 다음과 같이 새 앨리먼트를 생성할 수 있음. 보이는 것과 같이 id 또는 style 등의 프로퍼티 또는 텍스트를 넣어서 제작할 수 있다.
const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world"); 뿐만 아니라 안에 이벤트를 넣어 생성하는 것도 가능하다.
const button = React.createElement("button", {
onClick: ()=>{
console.log("clicked")
},
style:{
backgroundColor:"red"
}
}, "Click me");앞서 만든 span 과 button 을 div안에 넣도록 생성할 수 있다.
const div = React.createElement("div", null, [span, button])마지막으로 다음 코드를 사용함으로서 만든 앨리먼트들을 ReactDom에 랜더링 할 수 있다.
ReactDOM.render(div, root); // render span into root'front-end > react' 카테고리의 다른 글
| [React 기초] 그래서 JSX가 뭔데? (정의와 기초 문법) (0) | 2022.01.17 |
|---|
댓글