📚 Reference

• 공식 문서 1
• 공식 문서 2
• 공식 문서 3
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3

📜 Chapter

TSX (TypeScript eXtension)

children

React.Fragments

‣

JSX (JavaScript eXtension)

• JSX

• jsx

• JavaScript eXtension

• 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것이다. 그것이 바로 JSX이다.

• JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 JavaScript 문법의 확장이다.

• JSX는 JavaScript 함수 호출 방식으로 컴파일 되어 component에 대한 마크업을 만들 수 있는 더 좋은 방법을 제공한다.

• JSX는 JavaScript의 확장 문법이다.

• UI 다루는 코드의 가독성을 높이기 위해 고안된 문법이다.

• createElement() 함수를 직접 사용하는 방식은 읽기 어려운 UI 코드를 만들 수 밖에 없다.

• 일반적으로 HTML 코드를 반환하는데 쓰인다.

• 예시

  <div className="sidebar" />
  

  React.createElement(
    'div',
    {className: 'sidebar'}
  )
  

• JSX는 마치 마크업 문법 같다.

  <h1>Hello world</h1>
  
  // React.createElement('h1', null, 'Hello world')