카테고리 없음
react js/ react dom의 역할, 리액트 요소 생성하기
김딸기*
2024. 11. 16. 16:44
<body>
<div id="root"></div>
</body>
<!--react-dom을 import하기-->
-react js는 element를 생성하고 이벤트 리스너를 더하는 것을 도와줌->interactive 파워를 가짐
-react dom 을 사용하는 이유 : react element 들을 html 요소로 바꾸기 위해
비어있는 div는 reactDom이 react element를 가져다 놓을 장소
-id가 root인 div를 가져온 후 reactDom.render함-> react element를 id가 root인 div안에서 보여주라는 뜻
2. react 에서는 element 를 생성하면서 props를 전달할 수 있음, 이때 html의 property 뿐 아니라, event listener 를 넘겨줄 수 있다(on + *) .
3. react를 사용하는 이유는 interactive 한 어플리케이션을 개발하기 위함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<!--react-dom을 import하기-->
<script>
const root = document.getElementById("root"); //root가 id인 div요소를 가져와 root라는 요소 생성
const h3 = React.createElement(
//h3이라는 이름의 리액트 요소 생성
"h3", //1. 태그: root에 들어갈 html태그
{
id: "title",
onMouseEnter: () => console.log("mouse enter"), //마우스 올리면 문장 출력
}, // 2. 요소 ->id는 title/ 클릭 시 문장 출력
"hello im title" //3. 내용
);
const btn = React.createElement(
//btn이라는 이름의 리액트 요소 생성
"button", //1. 태그 이름
{
onclick: () => console.log("clicked"), //이벤트리스너
style: {
backgroundColor: "tomato",
}, //2. 요소: 클릭시 문장 출력(이벤트리스너)/ 배경색을 토마토
},
"click me" //3. 내용
);
const container = React.createElement("div", null, [h3, btn]); // 니가만든 리액트 element들을 특성없이 div 요소로 합쳐 container라는 리액트 요소 만들어
ReactDOM.render(container, root); //니가 만든 리액트 element들을 id가 root인 div안에서 보여줘=>2개 요소 렌더링
</script>
</html>
리액트 요소 생성시 변수를 지정해 내부에 태그이름, 요소, 내용을 포함한다
이때 태그이름은 html요소를 말하며 요소는 특징이나 id, 이벤트 리스너를 포함한다. 내용은 html에서 화면에 보이는 내용이다
