*주의 : 아래 코드보다 간단하게 사용할 수 있으므로 외우지 말 것!
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script>
const root = document.querySelector("#root");
const h3 = React.createElement(
"h3", //html tag
{
id: "title",
onMouseEnter: () => console.log("mouse enter"),
}, // property: classname, id, style, event
"hello, I'm span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
}
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
 |
React JS const btn = React.createElement( "button", { onClick: () => console.log("im clicked"), }, "Click me" ); |
VANILA JS <button id="btn">click me!</button> const button = document.querySelector("#btn"); const span = document.querySelector("span") button.addEventListener("click", handlebtn) |
* 바닐라JS 코드를 ReactJS 코드로 대체가능 (간편)
ㄴ <button>id 할당을 하지 않아도 된다.
ㄴ document.qureySelector로 불러오지 않아도된다.
ㄴ EventListener을 하지 않아도된다.
* React을 활용해서 html tag를 생성할 수 있고 바로 이벤트를 불러올 수 있어 편하다.
*어떤 evnet가 있는지 모를땐 button.addEventListener(" 여기서 찾아봐라", 함수);
| * React.CreateElement(#,##,###) |
# : html 태그 ## : classname, id , style, event ### : 본문 |
| * <div> 안에 <h3>와 <button>을 동시에 위치시키는 방법 | |
 |
const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root); |
React.createElemet을 사용하여 div을 만들고 proeprty는 null, div안에 h3, btn을 위치시킨 후
ReactDOM.render을 사용하여 변수 container을 <div id="root">에 위치시킨다.
반응형
'프론트엔드 > react' 카테고리의 다른 글
| React (4) - Set State, Modifier, Auto Render #2 (0) | 2023.04.18 |
|---|---|
| React (4) - Set State, Modifier, Auto Render (1) | 2023.04.18 |
| React (3) - Set State, Good React! (0) | 2023.04.18 |
| React (2) - React Event 동작 #2 (JSX) (0) | 2023.04.17 |
| React (1) - React 기본 (0) | 2023.04.17 |
