createElement

const element = createElement(type, props, ...children)

• Reference참조
  • createElement(type, props, ...children)
• Usage사용법
  • Creating an element without JSXJSX 없이 엘리먼트 생성하기

Reference참조

createElement(type, props, ...children)

Call createElement to create a React element with the given type, props, and children. createElement를 호출하면 주어진 type, props, children으로 React 엘리먼트를 생성합니다.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

See more examples below. 아래에서 더 많은 예시를 확인하세요.

Parameters매개변수

• type: The type argument must be a valid React component type. For example, it could be a tag name string (such as 'div' or 'span'), or a React component (a function, a class, or a special component like Fragment). type: type 인수는 유효한 React 컴포넌트 타입이어야 합니다. 예를 들어, 태그 이름 문자열 (예: 'div' 또는 'span') 또는 React 컴포넌트(함수, 클래스 또는 Fragment와 같은 특수 컴포넌트)가 될 수 있습니다.

• props: The props argument must either be an object or null. If you pass null, it will be treated the same as an empty object. React will create an element with props matching the props you have passed. Note that ref and key from your props object are special and will not be available as element.props.ref and element.props.key on the returned element. They will be available as element.ref and element.key. props: props 인자는 객체이거나 null 이어야 합니다. null을 전달하면 빈 객체와 동일하게 취급됩니다. React는 전달한 props와 일치하는 props를 가진 엘리먼트를 생성합니다. 참고로 props 객체의 ref와 key는 특수하게, 반환된 element에서 element.props.ref와 element.props.key로 사용할 수 없다는 점에 유의하세요. 이들은 element.ref 및 element.key로 사용할 수 있습니다.

optional ...children: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, portals, empty nodes (null, undefined, true, and false), and arrays of React nodes. 선택적 ...children: 0 또는 그 이상의 자식 노드. React 엘리먼트, 문자열, 숫자, portals, 빈 노드(null, undefined, true, false), React 노드의 배열 등을 포함한 모든 요소들이 React 노드가 될 수 있습니다.

Returns반환값

createElement returns a React element object with a few properties: createElement는 몇 가지 프로퍼티가 있는 React 엘리먼트 객체를 반환합니다:

• type: The type you have passed. type: 전달해준 type.

• props: The props you have passed except for ref and key. If the type is a component with legacy type.defaultProps, then any missing or undefined props will get the values from type.defaultProps. props: 전달해준 props(ref와 key 제외). type이 레거시인 type.defaultProps가 있는 컴포넌트인 경우, 누락되었거나 정의되지 않은 props는 type.defaultProps의 값을 가져옵니다.

• ref: The ref you have passed. If missing, null. ref: 전달한 ref. 없으면 null

• key: The key you have passed, coerced to a string. If missing, null. key: 전달한 key. 문자열로 형변환 됩니다. 없다면 null

Usually, you’ll return the element from your component or make it a child of another element. Although you may read the element’s properties, it’s best to treat every element as opaque after it’s created, and only render it. 일반적으로 컴포넌트에서 엘리먼트를 반환하거나 다른 엘리먼트의 자식으로 만들 것입니다. 엘리먼트의 프로퍼티를 읽을 수는 있지만, 생성된 후에는 모든 엘리먼트를 불명확하게 처리하고, 렌더링만 하는 것이 가장 좋습니다.

Caveats주의사항

• You must treat React elements and their props as immutable and never change their contents after creation. In development, React will freeze the returned element and its props property shallowly to enforce this. React 엘리먼트와 그 prop는 불변값으로 취급해야 하며, 생성 후에는 절대 내용을 변경해서는 안 됩니다. 개발 환경에서 React는 이를 강제하기 위해 반환된 엘리먼트와 그 prop 프로퍼티를 얕게 freeze합니다.

• When you use JSX, you must start a tag with a capital letter to render your own custom component. In other words, <Something /> is equivalent to createElement(Something), but <something /> (lowercase) is equivalent to createElement('something') (note it’s a string, so it will be treated as a built-in HTML tag). JSX를 사용할 때 사용자 정의 컴포넌트를 렌더링하려면 태그를 대문자로 시작해야 합니다. 즉, <Something />은 createElement(Something)과 같지만 <something />(소문자)는 createElement('something')과 같습니다(문자열이므로 내장된 HTML 태그로 취급됨).

• You should only pass children as multiple arguments to createElement if they are all statically known, like createElement('h1', {}, child1, child2, child3). If your children are dynamic, pass the entire array as the third argument: createElement('ul', {}, listItems). This ensures that React will warn you about missing keys for any dynamic lists. For static lists this is not necessary because they never reorder. createElement에 자식들을 여러 개의 인수로 전달하는 것은 오직 createElement('h1', {}, child1, child2, child3)와 같이 모든 자식이 정적으로 알려진 경우에 한해야 합니다. 자식들이 동적인 경우, createElement('ul', {}, listItems). 처럼 세 번째 인자로 전체 배열을 전달하세요. 이렇게 해야만 모든 동적 리스트에 대해 React가 key 누락에 대해 경고하는 것을 보장할 수 있습니다. 정적 리스트의 경우 순서가 바뀌지 않으므로 이 작업이 필요하지 않습니다.

Usage사용법

Creating an element without JSXJSX 없이 엘리먼트 생성하기

If you don’t like JSX or can’t use it in your project, you can use createElement as an alternative. JSX 가 마음에 들지 않거나 프로젝트에 사용할 수 없는 경우 createElement를 대안으로 사용할 수 있습니다.

To create an element without JSX, call createElement with some type, props, and children: JSX 없이 element를 생성하려면 type, props 및 children과 함께 createElement를 호출하세요:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

The children are optional, and you can pass as many as you need (the example above has three children). This code will display a <h1> header with a greeting. For comparison, here is the same example rewritten with JSX: children은 선택 사항이며 필요한 만큼 전달할 수 있습니다(위 예시에는 세 개의 children이 있습니다). 이 코드는 인사말이 포함된 <h1> 헤더를 표시합니다. 비교를 위해 동일한 예제를 JSX로 재작성했습니다:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

To render your own React component, pass a function like Greeting as the type instead of a string like 'h1': 커스텀 React 컴포넌트를 렌더링하려면 'h1'과 같은 문자열 대신 Greeting과 같은 함수를 type으로 전달하세요:

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

With JSX, it would look like this: JSX를 사용하면 다음과 같이 표시됩니다:

export default function App() {
  return <Greeting name="Taylor" />;
}

Here is a complete example written with createElement: 다음은 createElement로 작성한 예시 코드입니다:

And here is the same example written using JSX: 다음은 JSX를 사용하여 작성한 동일한 예시입니다:

Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to createElement is that it’s easy to see which closing tag corresponds to which opening tag. 두 코딩 스타일 모두 괜찮으며, 선호하는 스타일을 프로젝트에 사용할 수 있습니다. createElement에 비해 JSX를 사용할 때의 주요 이점은, 닫는 태그가 어떤 여는 태그에 대응하는지 쉽게 확인할 수 있다는 것입니다.

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}