-
220813 React JS 로 영화 웹 서비스 만들기 (2)Programming/Web 2022. 8. 15. 23:36
#2.3 Events in React
2개의 컴포넌트를 가지는 컴포넌트 생성한 것 ( span, btn )
const container = React.createElement("div",null,[span,btn]); << array로
button.addEventListener("click", handleClick); 을 React JS의 방식으로
property 도 이벤트 리스너 가능. onclick : () => console.log("im clicked"), 처럼
statement로만 html을 만들고 content 넣고 eventListener<!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> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!-- ReactJs 가 element 생성, eventListender 더하는 것 도와줌 interactive한 power가지는 것--> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element 들을 html로 바꾸는 것--> <script> const root = document.getElementById("root"); const h3 = React.createElement( "h3", { onmouseenter: () => console.log('mouse entered'), }, "hELLO i'M A TITLE" ); const btn = React.createElement( "button", { onClick: () => console.log('clicked'), //addEventListener("click",handleClick);을 이렇게 사용. 같은 것 }, //props가 포함된 object , 맞네 properties 는 object형태네! LIKE python의 딕셔너리, 루비의 해시 "click me" ); const container = React.createElement("div",null,[h3,btn]); ReactDOM.render(container,root); </script> </body> </html>#2.4 Recap
#2.5 JSX
Babel complies JSX down to React.createElement() calls
const element = (
<h1 className="greeting">
Hello World!
</h1>
);
JSX : 자바스크립트 확장한 문법const h3 = React.createElement("h3",{onmouseenter: () => console.log('mouse entered'),},"hELLO i'M A TITLE");위의 것을 이렇게 간단하게 만들 수 있음.
const Title = (<h1 id="title" onmouseenter={()=>console.log('mouse entered')}>Hello I'm A title</h1>);>> 그런데 이렇게 하면 오류 뜸. 이걸 사용하기 위해서는 다운로드를 받아줘야함브라우저는 JSX를 invalid 유효하지 않음.
따라서 원래 배웠던 어려운 형태로 ( createElement) 바꿀 변환기 설치해야함 : standalone ( of babel )'Programming > Web' 카테고리의 다른 글
코딩애플 JavaScript 입문과 웹 UI개발 Lv2(a) (1) 2022.11.24 코딩애플 JavaScript 입문과 웹 UI개발 Lv1(b) (0) 2022.11.24 코딩애플 JavaScript 입문과 웹 UI개발 Lv1(a) (0) 2022.11.23 220812 React JS 로 영화 웹 서비스 만들기 (1) (0) 2022.08.13 7 분 HTML 핵심 feat. 테크보이 워니님 강의 (0) 2021.08.01