리액트와 JSX

리액트(React)는 페이스북이 개발하고 관리하는 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 도구이다. 이때 리액트에서 중요한 개념 중 하나가 JSX이다.

JSX란?

JSX(JavaScript XML)는 자바스크립트의 확장 문법으로, 리액트 요소를 생성한다. HTML과 비슷해 보이지만 자바스크립트에 근접하다.

jsx 태그 작성 규칙

import './App.css';
import React from 'react';

// 태그를 추가하여 넣는 곳
function App() {

  // jsx 문법 (벡틱 없이 태그 삽입 가능)
  //const $h2 = React.createElement('h2', null, '에이치아이');
  const $h2 = <h2>에이치아이 ~~</h2>;

  **//⭐jsx 태그 규칙⭐
  // 1. return 안에 있는 태그는 반드시 하나의 태그로 묶어야 함.(형제태그 존재시 하나의 부모 태그로 묶기)
  // 2. 빈 태그(단는 태그가 없)는 반드시 />로 마감
  // 3. 태그의 class 속성은 JS 키워드 class와 겹쳐서 className으로 표기
  // 4. 의미없는 부모 태그는 <React.Fragment> , 축약ver <> 로 감싸라
  // 5. 변수값이나 함수를 출려할 때는 {}로 감싸라**
  
  const hello = '안녕하세요 ! 환영합니다 !';
  
  return (
  <React.Fragment> 
    <div className="App">
      <h1>{hello}</h1>
      {$h2}
    </div>
    <div className='noname'>
      <input type='text' />
      <label htmlFor='#'></label>
    </div>
  </React.Fragment>
  );
}

export default App;