노드의 속성/Props 정의하기

React.createElement(type, props, children)로 전달되는 두번째 인수는 props라 불리는 이름 값 속성을 가지고 있는 오브젝트입니다.

Props는 여러가지 역할을 합니다:

  1. Props는 HTML 속성이 될 수 있습니다. 만약 prop이 이미 있는 HTML 속성과 일치하면, DOM의 최종 HTML 요소로 추가됩니다.
  2. createElement()로 전달된 Props는 prop 오브젝트에 저장된 값이 됩니다. React.createElement() 인스턴스의 인스턴스 속성으로 말이죠. (예: [INSTANCE].props.[NAME OF PROP]) Props는 보통 컴포넌트의 입력값으로 사용됩니다.
  3. 몇몇의 특별한 props은 부작용이 있습니다. (예: key, ref와 dangerouslySetInnerHTML)

어떤 의미에서는 props가 React 노드의 환경설정 옵션처럼 생각할 수 있겠지만 다른 의미에서는 HTML 속성처럼 생각할 수도 있습니다.

아래의 코드 예제를 보면, React <li> 요소 노드를 5가지 props와 함께 정의하고 있습니다. 하나는 표준이 아닌 HTML 속성(예: foo:'bar')이고 다른 것들은 이미 있는 HTML 속성입니다.

var reactNodeLi = React.createElement('li',
    {
        foo: 'bar',
        id: 'li1',
        // 아래에 있는 클래스 속성을 바꾸기 위해 JS 클래스 이름 속성을 사용하고 있다는 점을 확인하세요.
        className: 'blue',
        'data-test': 'test',
        'aria-role' :'listitem',
        // 아래의 카멜 케이스(낙타 대문자)로 backgroundColor라 적혀있는 JS CSS 속성이 어떻게 쓰이는지 확인하세요.
        style: {backgroundColor:'red'}
    },
    'text'
);

위의 코드가 HTML 페이지에 렌더되면, 실제로 만들어진 HTML는 이와 같습니다:

<li id="li1" data-test="test" class="blue" aria-role="listitem" style="background-color:red;" data-reactid=".0">text</li>

여기서 짚고 넘어가야 하는 부분은 다음과 같은 속성들만 가상 DOM에서 실제 DOM으로 전달된다는 점입니다.

foo 속성/prop은 실제 DOM에서는 보이지 않습니다. 이런 표준이 아닌 HTML 속성은 생성된 React 노드 인스턴스인 li의 인스턴스 속성으로 접근할 수 있습니다.

source code

React 속성/props는 실제 HTML 속성 props로 해석되는 것 뿐만 아니라 React 컴포넌트로 전달되는 환경설정 값이 됩니다. props의 이런 측면은 React 컴포넌트 props 챕터에서 다뤄질 예정입니다. 지금은 React 노드에 prop을 전달하는 것과 컴포넌트 안에서 환경설정 입력으로 사용될 컴포넌트의 prop을 정의하는 것은 다르다는 것만 이해하시면 됩니다.

메모

  • 속성/prop을 공란으로 남겨두면, 속성값이 true인 것과 같습니다. (예: id=""는 id="true"가 됩니다. test는 test="true")
  • 속성/prop이 중복되면, 마지막에 정의된 것이 살아남습니다.
  • prop/속성을 HTML 사양에는 존재하지 않는 네이티브 HTML 요소로 전달하면, React는 그것들을 렌더하지 않습니다. 하지만, 커스텀 요소(예: 표준 HTML 요소가 아닌 것)를 사용하면, 임의/커스텀 속성이 커스텀 요소에 추가됩니다. (예: <x-my-component custom-attribute="foo"/>)
  • class 속성은 className으로 적어야 합니다.
  • for 속성은 htmlFor으로 적어야 합니다.
  • style 속성은 카멜 케이스의 스타일 속성 오브젝트를 참조합니다.
  • React 노드처럼 생성된 HTML 서식 요소(예: <input></input>, <textarea></textarea> 등)는 사용자 상호작용에 영향받는 몇몇의 속성/props을 지원합니다. 이것들은 value, checked와 selected입니다.
  • React는 key, ref와 dangerouslySetInnerHTML 속성/props를 제공합니다. 이것들은 DOM에는 존재하지 않고 특이한 역할/함수를 담당합니다.
  • 모든 속성들은 HTML에서 적히는 것과 달리 카멜 케이스로 표현되어야 합니다. (예: accept-charset는 acceptCharset와 같이 적힙니다.)
  • 아래는 React가 지원하는 HTML 속성들입니다. (카멜 케이스로 작성되어 있습니다.)
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrap

results matching ""

    No results matching ""