<Button /> </div> ); ``` 즉, 함수화 하여 <span style="color:red">생성한 element들을 태그를 이용해서 Container의 태그(여기서는 div) 에 넣기</span> 엘리먼트를 태그로 넣기 : `<함수명 />` ????? <mark>여기서 함수명은 <span style="color:red">무조건 대문자</span>로 시작해야 함. (소문자 태그들은 html요소로 인식함.)</mark> - Container에 넣고 ReactDOM.render ```js ReactDOM.render(<Container />, root); ``` : root에 Container함수 태그를 넣기 # 예제 ```js <!DOCTYPE html> <html> <body> <div id="root"></div> </body>  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> //reactDom에서 element를 render할 위치로 root를 설정 -> 선언 필요 const root = document.getElementById("root"); //JSX문법을 이용해서 createElement (h3) function Title (){ return( <h3 id="title" onMouseEnter={() =>console.log("mouse enter")}> Hello I'm a title </h3> ); } //JSX문법을 이용해서 createElement (button) const Button = () => ( <button style = {{ backgroundColor : "tomato", }} onClick={() => console.log("im clicked")} > Click me </button> ); //btn과 span을 모두 render하는 방법 (JSX방식) // HTML 태그처럼 div안에 넣어주기 const Container= () => ( <div> <Title /> <Button /> </div> ); //render() 는 여기 React element를 가지고 HTML로 만들어 root 안에 배치(사용자에게 보여줌)함. ReactDOM.render(<Container />, root); </script> </html> ```</article></body></html>

$$config title: [ReactJS] ReactJS 이해하기 3. ReactJS로 element 생성 (w. JSX 문법) ? keywords: - ReactJS - JSX - ... $$ # JSX 문법으로 ReactJS 의 createElement를 수행하는 방법 - 1, 2단계 : root 설정과 ReactDOM.render() => 동일함. ```js

... ``` - 3단계 : JSX 문법을 이용하여 각 element의 createElement 구현 ? - 구현하는 방식은 JSX문법인데 HTML과 유사 (태그 속성에 엘리먼트의 속성을 넣고 content는 태그 사이에 넣기)) ```js //h3 태그를 이용해서 Title 엘리먼트(변수) 구현 const Title =

console.log("mouse enter")}> Hello I'm a title

``` - 4단계 : 구현한 변수를 함수화하기 ??? 함수화 하는 방식은 2가지!! ```js const Title = () => (

console.log("mouse enter")}> Hello I'm a title

); ``` - 5단계 : 구현한 함수들을 Container에 넣어서 rendering (두개 이상의 엘리먼트를 넣을거면 Container에) - Container에 넣는 방법 (Container도 함수임 ?) ```js const Container= () => (

<Button /> </div> ); ``` 즉, 함수화 하여 <span style="color:red">생성한 element들을 태그를 이용해서 Container의 태그(여기서는 div) 에 넣기</span> 엘리먼트를 태그로 넣기 : `<함수명 />` ????? <mark>여기서 함수명은 <span style="color:red">무조건 대문자</span>로 시작해야 함. (소문자 태그들은 html요소로 인식함.)</mark> - Container에 넣고 ReactDOM.render ```js ReactDOM.render(<Container />, root); ``` : root에 Container함수 태그를 넣기 # 예제 ```js <!DOCTYPE html> <html> <body> <div id="root"></div> </body>  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> //reactDom에서 element를 render할 위치로 root를 설정 -> 선언 필요 const root = document.getElementById("root"); //JSX문법을 이용해서 createElement (h3) function Title (){ return( <h3 id="title" onMouseEnter={() =>console.log("mouse enter")}> Hello I'm a title </h3> ); } //JSX문법을 이용해서 createElement (button) const Button = () => ( <button style = {{ backgroundColor : "tomato", }} onClick={() => console.log("im clicked")} > Click me </button> ); //btn과 span을 모두 render하는 방법 (JSX방식) // HTML 태그처럼 div안에 넣어주기 const Container= () => ( <div> <Title /> <Button /> </div> ); //render() 는 여기 React element를 가지고 HTML로 만들어 root 안에 배치(사용자에게 보여줌)함. ReactDOM.render(<Container />, root); </script> </html> ```</article></body></html>