API 참고서

React DOM 컴포넌트

React는 브라우저에 내장된 모든 HTML과 SVG 컴포넌트를 지원합니다.

공통 컴포넌트

브라우저에 내장된 모든 컴포넌트는 일부 Props와 이벤트를 지원합니다.

ref와 dangerouslySetInnerHTML같은 React 고유의 Props를 포함합니다.

폼Form 컴포넌트

다음과 같은 브라우저에 내장된 컴포넌트는 사용자 입력을 받습니다.

value 프로퍼티를 전달하여 제어할 수 있기 때문에 React에서 특별합니다.

Resource and Metadata Components

다음 브라우저 컴포넌트들을 사용하면 외부 리소스를 로드하거나 메타데이터로 문서에 주석을 달 수 있습니다.

위 컴포넌트들은 React에서 특별하게 다뤄집니다. React는 위 컴포넌트들을 document head 내부에 렌더링하고, 리소스를 불러올 동안 일시 중단하고, 각 특정 구성 요소의 참조 페이지에 설명된 다른 동작을 시행합니다.

모든 HTML 컴포넌트

React는 브라우저에 내장된 모든 HTML 컴포넌트를 지원합니다. 이는 다음과 같은 컴포넌트들을 포함합니다.

중요합니다!

DOM 표준과 유사하게 React는 프로퍼티에 camelCase 표기법을 사용합니다. 예를 들어 tabindex 대신 tabIndex로 작성합니다. 온라인 변환기를 사용하여 기존 HTML을 JSX로 변환할 수 있습니다.

커스텀 HTML 요소

If you render a tag with a dash, like <my-element>, React will assume you want to render a custom HTML element.

is 어트리뷰트를 사용하여 브라우저 내장 HTML 요소를 렌더링하면 커스텀 엘리먼트로 취급됩니다.

Setting values on custom elements

Custom elements have two methods of passing data into them:

  1. Attributes: Which are displayed in markup and can only be set to string values
  2. Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

By default, React will pass values bound in JSX as attributes:

<my-element value="Hello, world!"></my-element>

Non-string JavaScript values passed to custom elements will be serialized by default:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

React will, however, recognize an custom element’s property as one that it may pass arbitrary values to if the property name shows up on the class during construction:

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

Listening for events on custom elements

A common pattern when using custom elements is that they may dispatch CustomEvents rather than accept a function to call when an event occur. You can listen for these events using an on prefix when binding to the event via JSX.

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

중요합니다!

Events are case-sensitive and support dashes (-). Preserve the casing of the event and include all dashes when listening for custom element’s events:

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>

모든 SVG 컴포넌트

React는 브라우저에 내장된 모든 SVG 엘리먼트를 지원합니다. 이는 다음과 같은 것을 포함합니다.

중요합니다!

DOM 표준과 유사하게 React는 프로퍼티에 camelCase 표기법을 사용합니다. 예를 들어 tabindex 대신 tabIndex를 작성합니다. 온라인 변환기를 사용하여 기존 SVG를 JSX로 변환할 수 있습니다.

네임스페이스 어트리뷰트 또한 콜론 없이 작성해야 합니다.

  • xlink:actuate 대신 xlinkActuate
  • xlink:arcrole 대신 xlinkArcrole
  • xlink:href 대신 xlinkHref
  • xlink:role 대신 xlinkRole
  • xlink:show 대신 xlinkShow
  • xlink:title 대신 xlinkTitle
  • xlink:type 대신 xlinkType
  • xml:base 대신 xmlBase
  • xml:lang 대신 xmlLang
  • xml:space 대신 xmlSpace
  • xmlns:xlink 대신 xmlnsXlink
이전useFormStatus
다음공통 컴포넌트 (예: <div>)