일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- JS redirection
- git 협업셋팅
- JS 삼항연산
- JS 데이터타입
- JS setTimeout
- JS preventDefault
- JS 형변환
- JS localStorage
- JS setInterval
- JS 함수
- CSS기초
- JS typeof연산자
- JS form action
- JS value속성
- JS 화살표함수
- JS append
- js 변수
- JS 스코프
- JS form
- JS null undefined
- JS 연산
- JS 타이머기능
- JS appendChild
- HTML기초
- JS 숫자
- JS 기초
- JS classList
- CSS속성정리
- JS prompt
- JS clearInterval
공부기록용
Element 본문
🔴Element Rendering
🔻ReactDOM.render()
🔴React.createElement()
React
React 요소는 변경이 불가능하다. 한번 요소를 만들었다면, 그 자식이나 속성을 변경할 수 없다. (특정한 시간대의 UI를 보여줄 뿐) 그래서 UI를 업데이트할 수 있는 유일한 방법은 새로운 요소를 만드는 것이며, 이 요소를 ReactDOM.render() 로 전달하는 것이다.
ReactDOM
React DOM이란, Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다.
React DOM에는 리액트 엘리먼트를 브라우저에 렌더링 하는 데 필요한 모든 도구가 들어 있다.
ReactDOM.render()
element는 리액트의 가장 작은 단위이다.
ReactDom.render 코드는 React 컴포넌트를 웹 브라우저에 렌더링 하는 api이다.
ReactDOM.render(
element, // (1)
container, // (2)
[callback] // (3)
)
- 화면에 그려질 react element (넣을 요소)
- react element를 해당 container DOM에 랜더링 (구체적인 위치)
- 랜더링 후 반환되는 값을 돌려주는 콜백 함수
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다. (내용이 변경된 노드만 업데이트)
ReactDOM.render(표시할 엘리먼트, 어디에 표시할지)
// ex.
ReactDOM.render(element, document.getElementById('root'))
// -> id가 root인 요소에 element를 만든다.
// index.html
<div id="root"></div>
해당 HTML에 텍스트를 넣기 위해 ReactDOM.render()을 이용해 다음과 같이 엘리먼트를 렌더링 할 수 있다.
const element = <h1>Hello, elice</h1>;
ReactDOM.render(element, document.getElementById('root'));
✔️과정 잘 보기
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- 📌 -->
<div id="root"></div>
</body>
</html>
// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
// 📌ReactDOM에 App을 렌더링합니다.
// id가 root인 요소에 App컴포넌트를 넣을 것
ReactDOM.render(<App/>, document.getElementById('root'));
// App.js
import React from "react";
import "./App.css";
// 📌hello, React!를 출력하는 JSX를 element에 저장합니다.
const element = <h1>Hello, React!</h1>
// 📌<h1>Hello, React!</h1>를 가진 App컴포넌트,
function App() {
return element;
}
export default App;
React.createElement()
React를 사용할 때 JSX는 필수가 아니다. 빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하는 것은 특히 편리하다.
React.createElement()를 이용하면 JSX문법을 사용하지 않고 객체로 표현할 수 있다.
React.createElement(
'태그 명',
{className: '클래스 명'},
'출력 내용'
);
- 태그 명: HTML의 태그 명
- 클래스 명: 클래스의 이름
- 출력 내용: 화면에 출력하고자 하는 내용
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
🟰
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
기존 JSX 문법 대신에 React.createElement() 메소드를 이용하여 매개변수로 헤더, 속성, 출력 값을 순서대로 넘겨주면 된다.
🔗참고🔗
https://ko.legacy.reactjs.org/docs/react-without-jsx.html
https://lakelouise.tistory.com/85
https://reactjs-kr.firebaseapp.com/docs/rendering-elements.html
'💡깨달음💡 > React' 카테고리의 다른 글
CSS-in-js VS Styled Components (0) | 2023.11.27 |
---|---|
Hook (1) | 2023.11.27 |
export / import (0) | 2023.11.16 |