Notice
Recent Posts
Link
«   2024/09   »
일 월 화 수 목 금 토
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
Tags more
Archives
관리 메뉴

공부기록용

Element 본문

💡깨달음💡/React

Element

과부하가즈아 2023. 11. 19. 14:56

🔴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)
)
  1. 화면에 그려질 react element (넣을 요소)
  2. react element를 해당 container DOM에 랜더링 (구체적인 위치)
  3. 랜더링 후 반환되는 값을 돌려주는 콜백 함수

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

https://ko.legacy.reactjs.org/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
'💡깨달음💡/React' Related Articles more
Comments