Skip to content

render.md

Latest commit

 

History

History
218 lines (151 loc) · 7.44 KB

render.md

File metadata and controls

218 lines (151 loc) · 7.44 KB
Raw
title 렌더링하기

이 API는 향후 React 메이저 버전에서 삭제될 예정입니다.

React 18에서 render는 createRoot로 교체되었습니다. React 18에서 render를 사용하면 앱이 React 17을 실행하는 것처럼 동작하므로 경고를 표시합니다. 자세한 내용은 클라이언트 렌더링 API 업데이트를 참조하세요.

render는 JSX ("React node")를 브라우저 DOM 노드로 렌더링합니다.

render(reactNode, domNode, callback?)

참조 {/reference/}

render(reactNode, domNode, callback?) {/render/}

React 컴포넌트를 브라우저 DOM 요소 내에 표시하려면 render를 호출하세요.

import { render } from 'react-dom';

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

React는 domNode 내에 <App />을 표시하고 해당 DOM을 관리합니다.

보통 React로 완전히 구축된 앱은 render를 최상 컴포넌트와 함께 한 번만 호출합니다. 페이지의 “일부분”에 React를 사용하는 경우 필요한 만큼 render를 호출할 수 있습니다.

아래 예시를 참고하세요.

매개변수 {/parameters/}

  • reactNode: 표시하려는 React node입니다. 보통 <App />과 같은 JSX를 사용하지만 createElement()로 구성된 React 요소, 문자열, 숫자, null, 또는 undefined를 전달할 수 있습니다.

  • domNode: DOM 요소입니다. React는 전달한 reactNode를 이 DOM 요소 내에 표시합니다. 이후로 React는 domNode 내부의 DOM을 관리하고 React 트리가 변경될 때 업데이트합니다.

  • optional callback: 함수입니다. 전달하면 React는 컴포넌트가 DOM에 배치된 후에 이를 호출합니다.

반환값 {/returns/}

render는 일반적으로 null을 반환합니다. 하지만 전달한 reactNode가 class 컴포넌트인 경우, 해당 컴포넌트의 인스턴스를 반환합니다.

주의 사항 {/caveats/}

  • React 18에서 render는 createRoot로 교체되었습니다. React 18 이상에서는 createRoot를 사용하세요.

  • 처음 render를 호출하면 React는 React 컴포넌트를 렌더링하기 전에 해당 domNode 내 존재하는 HTML을 모두 초기화합니다. 서버에서 혹은 빌드 중에 React에 의해 생성된 HTML이 domNode에 포함되어 있다면 기존 HTML에 이벤트 핸들러를 연결하는 hydrate()를 대신 사용하세요.

  • 동일한 domNode에서 render를 두 번 이상 호출하면 React는 최신 JSX를 반영하기 위해 필요한 만큼 DOM을 업데이트합니다. React는 이전에 렌더링 된 트리와 "맞춰보며" 재사용할 수 있는 DOM 부분과 재생성해야 하는 DOM 부분을 결정합니다. 동일한 domNode에 render를 재호출하는 것은 최상단 컴포넌트에서 set 함수를 호출하는 것과 유사합니다. React는 불필요한 DOM 업데이트를 방지합니다.

  • 앱 전체가 React로 구축된 경우, render 호출은 앱에서 한 번만 발생할 것입니다. (프레임워크를 사용하는 경우, 이 호출을 대신 수행할 수 있습니다) 자식 컴포넌트가 아니라 DOM 트리의 다른 부분(예시: 모달 또는 툴팁)에 JSX를 렌더링하려면 render 대신 createPortal을 사용하세요.

사용법 {/usage/}

React 컴포넌트를 브라우저 DOM 노드 안에 표시하려면 render를 호출하세요.

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

최상단 컴포넌트 렌더링하기 {/rendering-the-root-component/}

React로 완전히 구축된 앱에서는 "최상단('root')" 컴포넌트를 렌더링하기 위해--일반적으로 시작할 때 한 번만 이 작업을 수행합니다.

import './styles.css';
import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));
export default function App() {
  return <h1>Hello, world!</h1>;
}

보통 render를 다시 호출하거나 다른 곳에서 호출할 필요는 없습니다. 이 시점부터 React가 애플리케이션의 DOM을 관리합니다. UI를 업데이트하려면 컴포넌트에서 state를 사용할 것입니다.

여러 개의 최상단 컴포넌트 렌더링하기 {/rendering-multiple-roots/}

완전히 React로 구축된 페이지가 아니라면 React가 관리하는 최상위 UI마다 render를 호출하세요.

<nav id="navigation"></nav>
<main>
  <p>This paragraph is not rendered by React (open index.html to verify).</p>
  <section id="comments"></section>
</main>
import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);
export function Navigation() {
  return (
    <ul>
      <NavLink href="/">Home</NavLink>
      <NavLink href="/about">About</NavLink>
    </ul>
  );
}

function NavLink({ href, children }) {
  return (
    <li>
      <a href={href}>{children}</a>
    </li>
  );
}

export function Comments() {
  return (
    <>
      <h2>Comments</h2>
      <Comment text="Hello!" author="Sophie" />
      <Comment text="How are you?" author="Sunil" />
    </>
  );
}

function Comment({ text, author }) {
  return (
    <p>{text} — <i>{author}</i></p>
  );
}
nav ul { padding: 0; margin: 0; }
nav ul li { display: inline-block; margin-right: 20px; }

unmountComponentAtNode()를 사용하여 렌더링 된 트리를 제거할 수 있습니다.

렌더링 된 트리 업데이트하기 {/updating-the-rendered-tree/}

동일한 DOM 노드에서 render를 여러 번 호출할 수 있습니다. 이전에 렌더링 된 구조와 컴포넌트 트리가 일치한다면 React는 state를 보존합니다.

import { render } from 'react-dom';
import './styles.css';
import App from './App.js';

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);
export default function App({counter}) {
  return (
    <>
      <h1>Hello, world! {counter}</h1>
      <input placeholder="Type something here" />
    </>
  );
}

render를 여러 번 호출하는 것은 일반적이지 않습니다. 보통 컴포넌트 내에서 상태를 업데이트합니다.