Common

Prop

• children : React 노드(엘리먼트, 문자열, 숫자, portal, null, undefined 및 boolean과 같은 빈 노드 또는 기타 React 노드의 배열). 컴포넌트 내부의 콘텐츠를 지정합니다. JSX를 사용할 때 일반적으로 <div><span /></div>와 같은 태그를 중첩하여 암묵적으로 children prop을 지정합니다.

• dangerouslySetInnerHTML: 내부에 원시 HTML 문자열이 있는 { __html: '<p>일부 html</p>' } 형식의 객체로, 내부에 원시 HTML 문자열이 있습니다. DOM 노드의 innerHTML 속성을 재정의하고 전달된 HTML을 내부에 표시합니다. 이 함수는 매우 주의해서 사용해야 합니다! 내부 HTML을 신뢰할 수 없는 경우(예: 사용자 데이터를 기반으로 하는 경우) XSS 취약점이 발생할 위험이 있습니다. dangerouslySetInnerHTML 사용에 대해 자세히 알아보세요.

• ref: useRef또는createRef의 ref 객체, ref 콜백 함수, 또는 레거시 ref에 대한 문자열. ref는 이 노드의 DOM 엘리먼트로 채워집니다. ref로 DOM을 조작하는 방법에 대해 자세히 알아보세요.

• suppressContentEditableWarning: boolean.
true이면, 일반적으로 함께 작동하지 않는 (일반적으로 함께 작동하지 않는) children과 contentEditable={true}가 모두 있는 엘리먼트에 대해 React가 표시하는 경고를 억제합니다. 이 값을 사용하면 contentEditable 콘텐츠를 수동으로 관리하는 텍스트 입력 라이브러리를 빌드할 때 사용합니다.
 

• suppressHydrationWarning: 불리언. 서버 렌더링을 사용하는 경우 일반적으로 서버와 클라이언트가 서로 다른 콘텐츠를 렌더링할 때 경고가 표시됩니다. 타임스탬프와 같은 일부 드문 경우에서는 정확한 일치를 보장하기가 매우 어렵거나 불가능합니다. suppressHydrationWarning을 true로 설정하면 React는 해당 엘리먼트의 속성과 콘텐츠가 일치하지 않을 때 경고하지 않습니다. 이는 한 단계 깊이에서만 작동하며, 탈출구로 사용하기 위한 것입니다. 과도하게 사용하지 마세요. hydration 오류 억제에 대해 자세히 알아보세요.

• style: CSS 스타일이 있는 객체(예: { fontWeight: 'bold', margin: 20 }). DOM style 프로퍼티와 마찬가지로 CSS 프로퍼티 이름도font-weight 대신 fontWeight와 같이 camelCase로 작성해야 합니다. 문자열이나 숫자를 값으로 전달할 수 있습니다. width: 100과 같이 숫자를 전달하면 React는 단위가 없는 프로퍼티가 아니라면 값에 자동으로 px(“픽셀”)를 추가합니다. 스타일 값을 미리 알 수 없는 동적 스타일에만 style을 사용하는 것을 권장합니다. 그 외의 경우에는 className과 함께 일반 CSS 클래스를 적용하는 것이 더 효율적입니다. className과 style로 CSS를 적용하는 방법에 대해 자세히 알아보세요.

• accessKey: 문자열. 엘리먼트의 키보드 단축키를 지정합니다. 일반적으로 권장하지 않습니다.

• aria-*: ARIA 속성을 사용하면 이 엘리먼트에 대한 접근성 트리 정보를 지정할 수 있습니다. 전체 내용은 ARIA attributes를 참조하세요. React에서 모든 ARIA 어트리뷰트 이름은 HTML에서와 완전히 동일합니다.

• autoCapitalize: 문자열. 사용자 입력을 대문자로 표시할지 여부와 방법을 지정합니다.

• className:문자열. 엘리먼트의 CSS 클래스 이름을 지정합니다. CSS 스타일 적용에 대해 자세히 알아보세요.

• contentEditable: 불리언. true이면 브라우저는 사용자가 렌더링된 엘리먼트를 직접 편집할 수 있도록 허용합니다. 이것은 Lexical과 같은 리치 텍스트 입력 라이브러리를 구현하는 데 사용됩니다. React는 사용자가 편집한 후에 React가 그 내용을 업데이트할 수 없기 때문에 contentEditable={true}가 있는 엘리먼트에 React 자식을 전달하려고 하면 경고를 표시합니다.

• data-*: 데이터 속성을 사용하면 엘리먼트에 일부 문자열 데이터를 첨부할 수 있습니다(예: data-fruit="banana"). React에서는 일반적으로 프로퍼티나 state에서 데이터를 읽어오기 때문에 일반적으로 사용되지는 않습니다.

• dir:'ltr' 또는 'rtl'. 엘리먼트의 텍스트 방향을 지정합니다.

• draggable: 불리언. 엘리먼트를 드래그할 수 있는지 여부를 지정합니다. HTML 드래그 앤 드롭 API의 일부입니다.

• enterKeyHint: 문자열. 가상 키보드의 엔터 키에 표시할 동작을 지정합니다.

• htmlFor: 문자열. <label> 및 <output>의 경우, 레이블을 일부 컨트롤과 연결할 수 있습니다. for HTML 속성과 동일합니다. React는 HTML 속성의 이름 대신 표준 DOM 프로퍼티 이름(htmlFor)을 사용합니다.

• hidden: 불리언 또는 문자열. 엘리먼트의 숨김 여부를 지정합니다.

• id:문자열. 나중에 찾거나 다른 엘리먼트와 연결하는 데 사용할 수 있는 이 엘리먼트의 고유 식별자를 지정합니다. 동일한 컴포넌트의 여러 인스턴스 간의 충돌을 방지하려면 useId로 생성합니다.

• is: 문자열. 지정하면 컴포넌트가 커스텀 엘리먼트처럼 작동합니다.

• inputMode: 문자열. 표시할 키보드의 종류(예: 텍스트, 숫자 또는 전화)를 지정합니다.

• itemProp: 문자열입니다. 구조화된 데이터 크롤러에 대해 엘리먼트가 나타내는 속성을 지정합니다.

• lang: 문자열입니다. 엘리먼트의 언어를 지정합니다.

Caveats주의사항

• children과 dangerouslySetInnerHTML을 동시에 전달할 수 없습니다.

• 일부 이벤트(예: onAbort 및 onLoad)는 브라우저에서는 버블링되지 않지만 React에서는 버블링됩니다.

ref 콜백 함수

<div ref={(node) => console.log(node)} />

매개변수

반환값

React 이벤트

<button onClick={event => {
  console.log(event); // React event object
                  // React 이벤트 객체
}} />

프로퍼티

• bubbles : 불리언. 이벤트가 DOM을 통해 버블을 발생시킬지 여부를 반환합니다.

• cancelable: 불리언. 이벤트를 취소할 수 있는지 여부를 반환합니다.

• currentTarget: DOM 노드. React 트리에서 현재 핸들러가 연결된 노드를 반환합니다.

• defaultPrevented: 불리언. preventDefault`가 호출되었는지 여부를 반환합니다.

• eventPhase숫자. 이벤트가 현재 어떤 단계에 있는지 반환합니다.

• isTrusted: 불리언. 이벤트가 사용자에 의해 시작되었는지 여부를 반환합니다.

• target: DOM 노드. 이벤트가 발생한 노드(먼 자식일 수 있음)를 반환합니다.

• timeStamp: 숫자. 이벤트가 발생한 시간을 반환합니다.

• nativeEvent: 원본 브라우저 이벤트 객체입니다.

메서드

• preventDefault()

• stopPropagation()

• isDefaultPrevented(): preventDefault가 호출되었는지 여부를 나타내는 불리언 값을 반환합니다.

• isPropagationStopped(): stopPropagation가 호출되었는지 여부를 나타내는 불리언 값을 반환합니다.

• persist(): React DOM에서는 사용되지 않습니다. React Native에서는 이벤트 이후 이벤트의 프로퍼티를 읽으려면 이 함수를 호출합니다.

• isPersistent(): React DOM에서는 사용되지 않습니다. React Native에서는 persist가 호출되었는지 여부를 반환합니다.