본문 바로가기
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 를 이용한다.
  • 원래 html 코드
<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 할 태그, 두 번째 인자는 삽입할 위치

'Frontend > ReactJS' 카테고리의 다른 글

[Nomad coders] React_Effects  (0) 2022.11.10
[Nomad coders] React_Props  (0) 2022.11.08
[Nomad coders] React_응용  (0) 2022.11.08
[Nomad coders] React_State  (0) 2022.11.08
[Nomad Coders] React_JSX  (0) 2022.11.08