목표

• 공식문서의 JSX에 대해 알아보기

2. JSX

2-1. JSX 없이 사용하는 Recat

• 먼저, 공식문서 JSX 없이 사용하는 React를 보면 가장 먼저 뜨는 것이 다음 문구이다.

React를 사용할 때 JSX는 필수가 아닙니다. 빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하는 것은 특히 편리합니다.

• 그리고 JSX 없이 사용한 React와 JSX를 사용한 React 예시를 보여준다.
• 먼저, JSX 없이 사용한 React 코드는 다음과 같다.

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

• React의 createElement는 인자로 주어지는 타입에 따라 새로운 React 엘리먼트를 반환한다.

React.createElement(
  type,
  [props],
  [...children]
)

• type의 인자로는 태그 이름 문자열(span, div 등), React 컴포넌트 타입, React Flagment 타입 중 하나가 올 수 있다.

• 위에서 빌드 환경에서는 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하는 것은 특히 편하다고 했지만 그럼에도 JSX를 사용하는 이유가 있다.

2-2. JSX를 사용하는 Recat

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

• JSX를 사용하는 가장 큰 이유는 JSX의 React 공식 문서에서는 위와 같이 말한다. UI 관련 작업을 할 때 시각적으로 더 도움이 된다 즉, 가독성이 좋다는 것이다.

2-3. JSX 특징

2-3-1. JSX에 표현식 포함하기

• JSX의 중괄호 안에는 유효한 모든 자바스크립트 표현식을 넣을 수 있다.

function App() {
  // 예시 1
  const food = "hamburger";
  const element1 = <h1>{food} is tasty</h1>;
  
  // 예시 2
  const places = ["Seoul", "Busan", "Jeju"];
  function print(places) {
    let exp = "";
    places.forEach((place, iter) => 
      exp += `${place}${iter !== places.length - 1 ? "," : ""}`
    );
    return `${exp} are located in Korea`
  }
  const element2 = <h1>{print(places)}</h1>
  
  return (
    <>
      {element1}
      {element2}
    </>
  );
}

// 결과
"hamburger is tasty"
"Seoul,Busan,Jeju are located in Korea"

• 위 코드 처럼 변수(food)나 함수(print)를 중괄호 { } 안에 넣고 사용할 수 있다.

• 그리고 JSX는 표현식이기 때문에 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

2-3-2. JSX 속성 정의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

const element = <div tabIndex="0"></div>

• 중괄호를 사용하여 어트리뷰트에 자바스크립트 표현실을 삽입할 수도 있다.

const element = <div style={styles.wrapper}></div>

💡 주의

• JSX는 HTML보다는 자바스크립트에 가깝기 때문에 리액트 DOM은 HTML 어트리뷰트 이름 대신 카멜 케이스(camelCase) 프로퍼티 명명 규칙을 사용한다.
• 예를 들어 JSX에서 class는 className이 되고 for는 htmlFor, tabindex는 tabIndex가 된다.

2-3-3. JSX 자식 정의

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

  const element = <input type="number" />
        
  return (
    <>
      {element}
    </>
  );

닫아 주지 않으면 SyntaxError: Unterminated JSX contents. 라는 에러 문구가 뜬다.

• JSX 태그는 자식을 포함할 수 있다.

  const element = (
    <div>
      <h1>Hello</h1>
      <h2>Have a nice day</h2>
    </div>
  );
  
  return (
    <>
      {element}
    </>
  );

2-3-4. JSX는 객체를 표현한다.

• 바벨은 JSX를 React.createElement() 호출로 컴파일 한다.
• 다음 두 코드는 동일하다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

• React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

// 주의: 다음 구조는 단순화 되었다.
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

• 이러한 객체를 React 엘리먼트라고 한다.
• 정리하면 JSX는 React.createElement의 간편한 표현식이다.

---

출처

• react-without-jsx(React)
• JSX(React)