728x90
반응형
이 글은 노마드코더님의 리액트js 강의를 듣고 개인공부 정리용으로 쓴 글입니다.
리액트로 버튼을 하나 생성해볼것이다. React.createElement를 하면되는데 프로퍼티를 주고 싶지 않으면
null 이라고 해도 된다.
현재 코드가 이런 상황인데 span과 btn을 함께 render하고 싶으면 어떻게 해야할까?
div를 만들어서 거기에 두개를 같이 담아줄 것이다.
React.createElement ( component ,property,childeren)꼴이기에
span과 btn을 array에 담아줄거다.
++) 두가지 엘리먼트를 하나의 엘리먼트에 담아주고 싶을 때 --> 배열 사용할 것
이제 button에 addEventListener를 붙여볼건데 리액트에는 property에 eventListener를 넣어줄 수 있다.
이 한줄의 코드를 가지고
앨리먼트, EventListener,content 를 한줄에 넣었다.
그리고 함수명의 접두어에 on을 붙여줌으로써 eventListener를 사용한다는 것을 명시한다.
리액트에서는 addEventListener을 하나하나 써주는 대신 property에 event를 등록할 수 있다!
최종코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{ onMouseEnter: () => console.log("mouse enter") },
"HELLO I'M A SPAN");
const btn = React.createElement(
"button", { onClick: () => console.log("clicked") },
"Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
|
cs |
하지만 이런식의 createElement로 개발자들은 사용하지 않는다고 한다! ㅋㅋㅋ
728x90
반응형
'React' 카테고리의 다른 글
| [React]조건부 렌더링과 setState (0) | 2022.04.01 |
|---|---|
| [React]local Storage를 통한 데이터 유지 (0) | 2022.04.01 |
| [React] 왜 React일까? (0) | 2022.04.01 |
| [React] 폼 검증하기 (0) | 2022.04.01 |
| [React] 폼 다루기 (0) | 2022.03.23 |
댓글