기본 제공되는 요소 Factories 사용하기

React는 자주 사용되는 HTML 요소 노드를 만들기 위한 지름길을 기본 제공합니다. 이 지름길은 React 요소 factories라고 불립니다.

ReactElement-factory는 특정한 타입 속성을 가진 ReactElement(React 요소)를 만들어내는 간단한 함수입니다.

기본 제공되는 요소 factory(예: React.DOM.li())를 사용하면, React 요소 노드 <li id="li1">one</li>는 이렇게 생성됩니다:

// uses React.DOM.li(props, children);
var reactNodeLi = React.DOM.li({id: 'li1'}, 'one');

이것 대신 말이죠:

// uses React.createElement(type, prop, children)
var reactNodeLi = React.createElement('li', {id: 'li1'}, 'one');

아래에 나열된 것은 기본 제공되는 모든 노드 factories입니다:

a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button,
canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,
dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,
hr,html,i,iframe,img,input,ins,kbd,keygen,label,legend,li,link,main,map,mark,menu,
menuitem,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,
pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strong,
style,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,
u,ul,var,video,wbr,circle,clipPath,defs,ellipse,g,image,line,linearGradient,mask,
path,pattern,polygon,polyline,radialGradient,rect,stop,svg,text,tspa

메모

• JSX를 사용하고 있다면, factories는 절대 사용하면 안됩니다.
• React는 커스텀 factories를 만들기 위한 기본 제공 도우미가 있습니다. 바로 React.createFactory(type)입니다.