4. Element.md

Element

• 리액트 요소(element)는 리액트가 UI를 표현하는 수단이다.
• JSX 문법으로 작성된 코드는 리액트의 createElement 함수로 변경된다.
• createElement 함수는 리액트 요소를 반환한다.

리액트 요소의 구조

const element = (
  <a key="key1" style={{ width: 100 }} href="http://google.com">
    click here
  </a>
);

console.log(element);

// console log
{
  type: 'a',
  key: 'key1',
  ref: null,
  props: {
    href: 'http://google.com',
    style: {
      width: 100,
    },
    children: 'click here',
  },
  // ...
}

• key와 ref를 제외한 나머지 속성 값은 리액트 요소의 props 속성값으로 들어간다.
• 그 밖에도 리액트 요소가 가진 속성 값은 더 있다.