JSX

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

React 라이브러리에서 UI를 구성할 때 사용하는 문법으로 JavaScript 코드안에 HTML을 쓰는 형태를 보인다.

1. 장점

• 가독성이 좋다.

  JavaScript에 비해 JSX는 사용하면 보기 쉽다.

• 오류 검사가 가능하다.

  babel-loader에 의해 오류를 감지할 수 있다.

• 쉽게 작성이 가능하다.

  HTML과 유사해 쉽게 작성이 가능하다.

2. 사용법

• JavaScript 코드 삽입하기.

  JavaScript 표현식을 작성하려면 JSX 내부에서 {} 로 묶어 삽입한다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; 

ReactDOM.render(
  element,
  document.getElementById('root')
);

• Component 묶기

  Component 내부는 DOM 트리 구조로 구성되기 때문에 Component에 여러 요소가 있으면 반드시 하나의 태그로 감싸야한다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

• Tag 닫기

  , 등의 Tag는 HTML에서 닫지 않아도 작동했지만 JSX에서는 닫아서 표현하지 않으면 오류가 발생한다.

const element = <img src={user.avatarUrl} />;

• 삼항 연산자

  JSX 내부 JavaScript 표현식에서 if문 사용이 어려워 삼항 연산자를 사용한다.

• className

  class로 작성하면 경고 발생하며 class는 존재하는 키워드이기 때문에 className을 사용한다.

• Camel-Case

  React에서는 모든 DOM속성 또는 이벤트 핸들러를 Camel-Case로 처리해야한다.

onClick
onKeyDown
onKeyUp