[React] React 메서드 & React DOM

📌 React

: React 애플리케이션을 정의하고 구성하는 데 필요한 주요 기능과 API를 제공

• React  컴포넌트 정의
• React 의 핵심 기능(상태 관리, 생명주기 메서드 및 Context API) 제공
• JSX와 컴포넌트의 선언 처리

React 객체의 기능

 

 

 

📌 React DOM

: React 애플리케이션을 실제 DOM에 렌더링하는 데 필요한 기능을 제공

• 브라우저의 DOM과 상호작용을 담당
• DOM에 변경 사항을 적용

React DOM 객체의 기능

 

 

 

 

---

 

✅ React.createElement()

: React 요소 생성

createElement(type, props, ...children)

- type: 생성할 요소의 타입(HTML 태그 이름, 컴포넌트 등)
- props: 요소에 대한 속성(properties)
- children: 요소의 자식 노드

 

function render() {
  const children = listData.items.map(({ id, title }) => {
    const reactElement = createElement (
      "li",
      { className: "item", key: id },
  
      createElement (
        "img", 
        {src: `/architectures/architecture-${id}.jpg`, alt: "" }
      )
    );
  
    return reactElement;
  });
}

 

 

 

 

✅ React.isValidElement()

: 값이 React 요소인지 확인

isValidElement(value)

 

import { isValidElement, createElement } from 'react';

// ✅ React 엘리먼트
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ React 엘리먼트가 아님
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

 

 

 

 

✅ ReactDOM.createRoot()

: DOM 요소 안에 콘텐츠를 표시할 수 있는 React 루트 생성

createRoot(domNode, options?)

 

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

 

 

 

 

☑️ render() 

: 렌더링 하는 메서드

• 리액트 컴포넌트가 화면에 표시될 내용을 정의하는 메서드
• 리액트 17 및 이전 버전 👉 ReactDOM.render()
• 리액트 18 이상 👉 root.render();

ReactDOM.render(reactNode, domNode, [callback])
- reactNode: 렌더링 할 React 노드 
- domNode: 실제 DOM 요소
- callback: 렌더링 완료 후 호출될 선택적 함수 

root.render(reactNode, [callback]);
- reactNode: 렌더링 할 React 노드 
- callback: 렌더링 완료 후 호출될 선택적 함수 

 

 

ReactDOM.render()

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello World</h1>;
}


// 렌더링
const rootElement = document.getElementById('root');

ReactDOM.render(<App />, rootElement, () => {
  console.log('Render complete!');
});

 

 

root.render();

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello World</h1>;
}

// 렌더링
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />, () => {
  console.log('Render complete!');
});

 

 

 

 

☑️ unmount() 

ReactDOM.unmountComponentAtNode(domNode);
- domNode: 렌더링을 제거할 DOM 요소

root.unmount();
- root: ReactDOM.createRoot()로 생성된 루트 객체

 

: 렌더링을 제거하는 메서드

• 컴포넌트를 DOM에서 제거할 때 호출
  
• 리액트 17 및 이전 버전 👉 ReactDOM.createRoot().unmount()
• 리액트 18 이상 👉 root.unmount();

 

 

ReactDOM.unmountComponentAtNode()

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello World</h1>;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);


// 컴포넌트 제거
ReactDOM.unmountComponentAtNode(rootElement);

 

 

root.unmount()

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello World</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);


// 컴포넌트 제거
root.unmount();

 

 

 

---

 

createElement – React

 

React 최상위 API – React

 

ReactDOM – React

 

createElement – React

 

isValidElement – React

 

createRoot – React

 

렌더링하기 – React