React DOM Components

React supports all of the browser built-in HTML and SVG components. React는 모든 브라우저 빌트인 HTML 및 SVG 컴포넌트를 지원합니다.

Common components기본 컴포넌트들

All of the built-in browser components support some props and events. 모든 브라우저 빌트인 컴포넌트는 일부 props 및 이벤트를 지원합니다.

Common components (e.g. <div>)

This includes React-specific props like ref and dangerouslySetInnerHTML. 여기에는 ref 및 dangerouslySetInnerHTML과 같은 React 전용 props도 포함됩니다.

Form components폼 컴포넌트들

These built-in browser components accept user input: 다음 브라우저 빌트인 컴포넌트들은 사용자 입력을 허용합니다:

They are special in React because passing the value prop to them makes them controlled. 이들은 value prop을 전달하면 제어 컴포넌트가 된다는 점에서 특별합니다.

Resource and Metadata Components리소스 및 메타데이터 컴포넌트

These bulit-in browser components let you load external resources or annotate the document with metadata: 다음 빌트인 브라우저 컴포넌트를 사용하면 외부 리소스를 로드하거나 메타데이터로 문서에 주석을 달 수 있습니다:

They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component. 이들은 리액트가 문서 헤드로 렌더링하고, 리소스가 로드되는 동안 일시 중단하고, 각 특정 컴포넌트에 대한 참조 페이지에 설명된 다른 동작을 구현할 수 있는 특수한 컴포넌트들입니다.

All HTML components다른 모든 HTML 컴포넌트들

React supports all built-in browser HTML components. This includes: React는 모든 브라우저 빌트인 HTML 컴포넌트를 지원합니다. 여기에는 다음이 포함됩니다:

Note

Similar to the DOM standard, React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex. You can convert existing HTML to JSX with an online converter. DOM 표준과 유사하게 React는 prop의 이름에 camelCase 규칙을 사용합니다. 예를 들어, tabindex 대신 tabIndex를 작성합니다. 온라인 변환기를 사용하여 기존 HTML을 JSX로 변환할 수 있습니다.

Custom HTML elements사용자정의 HTML 엘리먼트

If you render a tag with a dash, like <my-element>, React will assume you want to render a custom HTML element. In React, rendering custom elements works differently from rendering built-in browser tags: <my-element> 처럼 대시(-)가 있는 태그를 렌더링하면 React는 사용자정의 HTML 엘리먼트를 렌더링한다고 가정합니다. React에서 사용자정의 엘리먼트를 렌더링하는 것은 빌트인 브라우저 태그를 렌더링하는 것과는 다르게 작동합니다:

All custom element props are serialized to strings and are always set using attributes. 모든 사용자정의 엘리먼트의 props는 문자열로 직렬화되며, 항상 속성(attribute)을 통해 설정할 수 있습니다.
Custom elements accept class rather than className, and for rather than htmlFor. 사용자정의 엘리먼트는 className 대신 class를, htmlFor 대신 for를 받습니다.

If you render a built-in browser HTML element with an is attribute, it will also be treated as a custom element. 브라우저 빌트인 HTML 엘리먼트를 is 속성을 사용하여 렌더링하는 경우에도 커스텀 요소로 취급됩니다.

Note

A future version of React will include more comprehensive support for custom elements. 향후 React 버전에는 커스텀 요소에 대한 보다 포괄적인 지원이 포함될 예정입니다.

You can try it by upgrading React packages to the most recent experimental version: React 패키지를 최신 실험 버전으로 업그레이드하여 사용해 볼 수 있습니다:

react@experimental
react-dom@experimental

Experimental versions of React may contain bugs. Don’t use them in production. 실험 버전의 React에는 버그가 있을 수 있습니다. 상용 환경에서는 사용하지 마세요.

All SVG components모든 SVG 컴포넌트들

React supports all built-in browser SVG components. This includes: React는 모든 브라우저 빌트인 SVG 컴포넌트를 지원합니다. 여기에는 다음이 포함됩니다:

Note

Similar to the DOM standard, React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex. You can convert existing SVG to JSX with an online converter. DOM 표준과 유사하게, React는 prop 이름에 camelCase 규칙을 사용합니다. 예를 들어, tabindex 대신 tabIndex를 작성합니다. 온라인 변환기를 사용하여 기존 SVG를 JSX로 변환할 수 있습니다.

Namespaced attributes also have to be written without the colon: 네임스페이스 속성은 콜론(:) 없이 작성해야 합니다:

xlink:actuate becomes xlinkActuate. xlink:actuate는 xlinkActuate가 됩니다.
xlink:arcrole becomes xlinkArcrole. xlink:arcrole는 xlinkArcrole가 됩니다.
xlink:href becomes xlinkHref. xlink:href는 xlinkHref가 됩니다.
xlink:role becomes xlinkRole. xlink:role는 xlinkRole가 됩니다.
xlink:show becomes xlinkShow. xlink:show는 xlinkShow가 됩니다.
xlink:title becomes xlinkTitle. xlink:title는 xlinkTitle가 됩니다.
xlink:type becomes xlinkType. xlink:type는 xlinkType가 됩니다.
xml:base becomes xmlBase. xml:base는 xmlBase가 됩니다.
xml:lang becomes xmlLang. xml:lang는 xmlLang가 됩니다.
xml:space becomes xmlSpace. xml:space는 xmlSpace가 됩니다.
xmlns:xlink becomes xmlnsXlink. xmlns:xlink는 xmlnsXlink가 됩니다.

PrevioususeFormStatus

NextCommon (e.g. <div>)