React를 배우자 - JSX 란?

예)

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

• JSX는 JavaScript를 확장한 문법으로, JavaScript의 모든 기능을 포함한다.
• JSX는 React element를 생성한다.
• React에서는 렌더링 로직이 UI로직(이벤트 처리, state 변화, 데이터 준비 등)과 연결된다.
• JSX 사용이 필수는 아니지만, JS 코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다.
• JSX의 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다.

예)

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

• 컴파일이 끝나면 JSX 표현식이 JS객체로 인식되기 때문에, JSX를 if 구문 및 for loop 안에 사용하는 것도 가능하다.

• 어트리뷰트에 따옴표를 이용한 문자 리터럴 정의, 중괄호를 사용한 표현식 삽입 모두 가능하지만, JSX는 html 보다는 JS에 가깝기 때문에 camelCase 명명 규칙을 사용한다. 또한 따옴표, 중괄호 중 하나만 사용해야 한다. (동시에 둘다 사용 X)

• 그 외 추가 설명은 아래 링크를 참고 https://ko.reactjs.org/docs/introducing-jsx.html