<aside> ❗ 내가 직접 만든 HTML 태그

</aside>

JSX

<script type="text/babel">

  const root = document.querySelector('#root')

  ReactDOM.render(
    <div>
			<div>
        <h1>주제</h1> 
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </div>,
    root
  ) 
  </script>

• JSX : JS 내부에서 HTML 문법을 사용할 수 있는 언어
• babel 을 통해 JSX를 순수한 JS로 변환시킨다.
• JSX는 문법 오류를 찾기 쉽고 가독성이 좋다.
• 최상위 요소가 하나여야 한다. ⇒ 형제 요소들을 fragment 요소(빈 태그 <>)로 감싸면 최상위 요소가 하나가 된다.
• JS 데이터를 ${} 가 아니라 {}로 표현할 수 있다.
• if 문은 사용할 수 없으므로 삼항 연산자를 사용한다.
• class 대신 className 을 사용해야 한다.
• 연 태그는 꼭 닫아야 한다.
• 인라인 방식의 style의 값은 객체로 삽입해야 한다.

ex) <div style={ {color: red, fontSize: ‘30px’} }></div>

class 컴포넌트

class ClassComponent extends React.Component {
      render() {
        return (<div>Hello</div>)  // JSX 언어
      }
    }

const root = document.querySelector('#root')
ReactDOM.render(<ClassComponent />, root)

• React.Component를 상속받아야 컴포넌트가 된다.

Function 컴포넌트