Frontend/ReactJS
[Nomad Coders] React_render
by 모너아링
2022. 11. 8.
React vs javascript
React
interactive 한 UI를 만들 수 있게 함
엔진의 역할
ReactDOM
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
React element를 HTML body에 두는 역할
React JS에서 React Element 생성
React JS는 HTML 내부에 직접 작성하지 않고, javascript 를 이용한다.
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
React JS 이용한 코드 (잘 사용하지 않는 방법)
<script>
//잘 사용하지 않는 방법
const root = document.getElementById("root");
//span의 property가 두 번째 인자
//span에 넣을 content가 세 번째 인자
const span = React.createElement(
"span",
{id: "sexy-span", style: {color: "red"},
"Hello I'm a span"
);
ReactDOM.render(span, root);
</script>
React JS 이용한 코드2 (자주 사용하는 방법)
<script>
//h3의 속성으로 eventListener 등록(onMouseEnter)
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a h3"
);
//버튼의 속성으로 eventListener 등록(onClick)
const btn = React.createElement(
"button",
{
onClick: () => console.log("I'm clicked"),
style: { backgroundColor: "tomato", },
},
"click me"
);
//div 안에 span과 btn 삽입
//2개의 컴포넌트를 가지는 컴포넌트 생성
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(btn, root);
</script>ReactDOM.render()
React element를 가지고 HTML로 만들어 배치
첫 번째 인자는 render 할 태그, 두 번째 인자는 삽입할 위치
