[React] JSX란?

JSX를 사용해야 하는 이유

React에서 엘리먼트 또는 컴포넌트를 랜더 ReactDom.render() 하려면

//일반 자바스크립트 형태
React.createElement(
  MyButton,
  { color: 'blue', shadowSize: 2 },
  React.createElement(
    'button',
    { onClick: () => {}, className: 'btn-success' },
    '버튼'
  )
)

위와 같이 작성해야 합니다.

그러나 수 많은 컴포넌트들을 작성할 때, 매번 반복적으로 React.createElement() 함수를 사용하는 것은 너무 불편하고 비효율 적입니다. JSX는 컴포넌트를 우리에게 익숙한 HTML을 작성하는 것과 유사한 사용성을 제공합니다. 위의 코드를 JSX로 작성한다면,

//jsx 형태
<MyButton color="blue" shadowSize={2}>
  <button class="btn-success">버튼</button>
</MyButton>

위와 같이 작성할 수 있습니다.

JSX란

JSX는 자바스크립트의 확장된 문법으로, 정식 자바스크립트 문법은 아닙니다. 따라서 JSX가 웹 브라우저에서 실행되려면 반드시 babel로 번들링 되어 코드가 일반 자바스크립트 형태로 변환되어야 합니다.

JSX 문법

하나의 최상위 엘리먼트

리액트 컴포넌트에 최상위 엘리먼트는 반드시 하나만 혀용됩니다.

// error
function LoginPage() {
  return (
    <div>LoginPage1</div>
    <div>LoginPage2</div>
  );
}
// ok
function LoginPage() {
  return (
    <div>
      <div>LoginPage1</div>
      <div>LoginPage2</div>
    </div>
  );
}

그러나 추가적인 div 태그를 생성하고 싶지 않다면 React v16에서 도입된 Fragment 를 사용하면 됩니다.

import React, { Fragment } from "react";
function LoginPage() {
  return (
    <Fragment>
      <div>LoginPage</div>
      <div>LoginPage</div>
    </Fragment>
  );
}

// Fragment를 생략한 단축 문법
function LoginPage() {
  return (
    <>
      <div>LoginPage</div>
      <div>LoginPage</div>
    </>
  );
}

자바스크립트 사용

JSX에서 자바스크립트 표현식을 사용하려면 해당 코드를 { }로 감싸면 됩니다.

function LoginPage() {
  const name = '이름';
  return <p>{name}</p>;
}

if문 대신 삼항 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없습니다. if문을 사용해야 하면 JSX 외부에서 사용해야 하며, 대신 JSX 내부에서는 삼항 연산자는 사용할 수 있습니다.

AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족하면 보여주고, 조건을 만족하지 않으면 렌더링 하지 않아야 할 경우에는 AND 연산자를 사용하면 됩니다.

// AND 연산자
function LoginPage() {
  const name = "로그인";
  return <div>{name === "로그인" && <h1>LoginPage</h1>}</div>;
}
// cf. 삼항 연산자
function LoginPage() {
  const name = "로그인";
  return <div>{name === "로그인" ? <h1>LoginPage</h1> : null}</div>;
}

undefined 컴포넌트 렌더링(반환) 불가

React 컴포넌트 자체에서 undefined를 반환하여 렌더링을 하면 오류가 발생합니다.

// error
function LoginPage() {
  const name = undefined;
  return name;
}
export default LoginPage;

JSX 내부에서 undefined를 렌더링 하는 것은 가능합니다.

// ok
function LoginPage() {
  const name = undefined;
  return <p>{name}</p>;
}
export default LoginPage;

인라인 스타일링

React에서 DOM element에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 적용해야 합니다.
자바스크립트에서 하이픈(-)은 마이너스 연산자로 인식되기 때문에, style 객체의 key에는 하이픈(-) 를 사용할 수 없고 대신 camelCase로 작성해야 합니다.

// style 객체를 선언 후 지정
function LoginPage() {
  const style = {
    backgroundColor: "red",
    fontSize: "12px",
    padding: 16, // 단위생략시 px로 지정
  };
  return <div style={style}>LoginPage</div>;
}

// style 객체를 직접 지정
function LoginPage() {
  return (
    <div
      style={{
        backgroundColor: "red",
        fontSize: "12px",
        padding: 16,
      }}
    >
      LoginPage
    </div>
  );
}

className

자바스크립트에서 class 는 예약어이기 때문에, CSS를 적용할 때 HTML에서 사용하던 class 속성을 사용하려면 JSX에서는 className로 사용해야 합니다.

function LoginPage() {
  return <div className="login-container">LoginPage</div>;
}

React v16 이전 버전에서는 오류가 발생하고 CSS가 적용이 되지 않았는데,
React v16 부터는 class 키워드를 사용하면 경고가 뜨긴하지만 적용은 됩니다.

주석

JSX 내부에 주석을 작성할 때는 {/* */} 같은 형식으로 작성하면 됩니다.
태그 내부에 작성을 해야 할때는 // 를 사용하면 되며 반드시 2줄 이상 이여야 합니다.

function LoginPage() {
  return (
    <>
      {/* 주석 */}
      <div //주석
      >
        LoginPage
      </div>
    </>
  );
}