코드 참고시 주의

작성하는 코드는 문법을 설명하기 위해 필요한 일부분만 보여주고 있습니다. 참고바랍니다.

JSX

XML과 유사한 구문을 사용하여 문서 개체 모델 트리를 생성할 수 있는 JavaScript 확장 문법.
UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨.

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

위와 같이 사용된다.
자바스크립트에서 HTML를 같이 작성한다고 생각하면 이해하기가 쉬울 것이다.

1. 태그는 무조건 닫혀야 함.

태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 함.

<img src="example.jpg" alt="예시"/>

2. 반드시 부모 요소 하나가 감싸는 형태.

Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있음.

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

빈 태그를 사용해서 감싸줄 수도 있음.

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

React에서 제공하는 Fragment를 사용할 수도 있음.

import {Fragment} from "react";

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

3. 자바스크립트 변수는 {중괄호}로 감싸줌.

중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있음.
예를 들어 2 + 2, user.firstName 또는 formatName(user) 등이 모두 유효.

const name = '현지';
const element = <h1>Hello, {name}</h1>;

4. class 대신 className을 사용.

JavaScript의 class 키워드와 HTML의 class 속성을 혼동하지 않게 하기 위해 HTML 요소의 클래스를 지정할 때는 class 대신 className을 사용. 즉, 리액트 JSX 상에서는 className이 HTML에서 class로 랜더링 됨. 

<h1 class="name">현지</h1>

일반적으로 HTML에서 CSS는 아래처럼 clss를 사용했지만,

<h1 className="name">현지</h1>

JSX에서는 class가 아닌 className을 사용한다.

5. 이벤트와 스타일은 camelCase 방식 사용.

JavaScript에서 객체의 속성은 일반적으로 카멜 케이스로 작성되기 때문.
React에서는 CSS의 각 요소는 JavaScript 객체로 표현됨.

const example {
  color: blue;
  backgroundColor: lightgray;
  padding: 10px;
  fontSize : 30px,
}

6. if문/for문 대신 삼항 연산자 사용.

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없음. 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 삼항 연산자, AND 연산자나 OR 연산자를 사용.

return (
  <div>
    {isLoggedIn ? (
      <LogoutButton onClick={handleLogout} />
    ) : (
      <LoginButton onClick={handleLogIn} />
    )}
  </div>
);

return (
  <div>
    {isLoggedIn && <LogoutButton onClick={handleLogout} />}
  </div>
);

참고 자료

JSX 소개
[React] 2. JSX란? (정의, 장점, 문법)