[⚛React] React Element, React Component 그리고 JSX

⚛ React Element

type과 props를 가지는 React의 객체

React 라이브러리에 있는 React.createElement(...)를 이용하여 만들 수 있으며 type으로 HTML 태그 이름을 가지고 그 이외의 특징을 props로 관리하는 객체 형태로 정의된다.

// createElement를 이용해서 React Element 만들기
React.createElement(
  'div',
  { className: 'name' },
  'React'
)

// createElement를 이용해서 만들어진 React Element 객체
{
  type: 'div',
  props: {
    className: 'name',
    children: 'React'
  }
}

그러나 이런 함수를 이용하는 방식은 코드가 지저분해서 가독성이 떨어지고 하나하나 타이핑하는게 어렵기 때문에 JSX라는 JavaScript를 확장한 문법을 신태틱 슈가로 사용한다.

<div className='name'>React</div>

좀 더 복잡한 구조의 경우의 JSX를 사용했을 때와 사용하지 않았을 때 가독성을 비교해보면 차이가 확연히 드러날 것이다.

// JSX를 사용한 경우
<button className='btn-gold'>
  <strong>
      OK!
  </strong>
</button>

/// JSX를 사용하지 않은 경우
React.createElement(
  'button',
  { className: 'btn-gold' },
  React.createElement(
    'strong',
    null,
    'OK!'
  )
);

⚛ React Component

• props를 받아서, React Element를 반환하는 함수 혹은 클래스

• React Element Tree를 캡슐화한다.

  // Button.jsx
  function Button(props){
  return(
    <button className={`btn-${props.color}`}>
      <strong>
          {props.children}
      </strong>
    </button>
  )
  }

  혹은 ES6의 화살표 함수를 이용하면 다음과 같이 표현할 수 있다.

  // Button.jsx
  const Button = (props) => (
  <button className={`btn-${props.color}`}>
    <strong>
        {props.children}
    </strong>
  </button>
  )

  React Component도 다음과 같이 JSX에서 사용할 수 있다.

  <Button color='gold'>
  OK!
  </Button>

✍️ React Component 규칙

• 대문자로 시작 - React Component가 포함된 파일명이나 React Component의 첫 문자는 대문자로 작성되어야한다. e.g. 버튼에 대한 React Component를 만들고자하면 이름은 <Button>...</Button>으로 만들고 파일명은 Button.jsx으로 작성되어야한다.

JSX

JSX는 HTML 형태의 JavaScript Object를 사용하는 확장된 JavaScript문법으로, 위에 React Element에서 언급했던 것처럼, JSX는 결과물로 React Element 를 생성한다.

const element = <h1 className='greeting'>Hello, world!</h1>;

let element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, World!'    
)

태그 규칙

• 기본 HTML 태그는 소문자로 시작한다.
• 사용자가 정의한 React Component는 HTML 태그와 구분하기 위해 대문자로 시작한다.
• HTML에서는 <img src='...' alt='...'/>같은 특정 태그만 self-closing 가능한 반면 JSX에서는 모든 태그가 <div />처럼 self-closing 가능하다.
• 자식 태그를 가질 수 있다.
• Dot Notation이 사용가능하다. e.g. <ReactComp.Button />

표현식 사용

• JavaScript 표현식이 들어가야 하는 부분에 {}를 넣고 사용한다.
• 사용가능한 JavaScript 표현식
  • 함수 호출식
    • e.g. <div>{_renderFunc()}</div>
  • 삼항 연산자
    • e.g. <div>{ loading ? <Loading /> <Button/>}</div>
  • 템플릿 리터럴
    • e.g. <div>{hello ${name}}</div>

어트리뷰트

• key={value}형태로 전달한다. 단, 문자열로 전달할 경우 ''과 ""사용 가능
• if, for, while같은 제어는 함수를 이용해서 밖에서 사용해야한다.
• XSS(Cross-Site-Scripting)에 대한 기본 대응이 되어있다.
• 실제 HTML DOM과는 다른 Attribute를 가지고 있다.
  • <input type="checkbox">
    • checked: 체크 상태 동적 할당
    • defaultChecked: 초기값 전달
  • <input type="text"> or <textarea type="text">
    • value: 내부값 동적 할당
    • defaultValue: 초기값 전달
  • DOM 객체에 쓰이는 innerHTML는 dangerouslySetInnerHTML을 이용한다.
  • CSS 선택자로 쓰이는 class는 className으로 사용한다.
    • className은 class를 동적할당할 수 있다.
      • e.g. <button className={button-${color}}>
  • for는 htmlFor를 사용한다.

주의사항

• JSX선언의 결과물이 React Element이기 때문에 JSX코드 스코프 안에 import React from "react"선언이 꼭 필요하다.
• JSX를 통해 조작되는 건 실제 DOM이 아닌 React의 Virtual DOM이다.
• 태그와 컴포넌트 사이의 white space는 자동으로 사라진다.