React - JSX란?

 

 

 

JSX

 

JSX란 JavaScript XML의 줄임말로 React에서 쓰는 JavaScript 문법입니다. 이 JSX를 이용해서 보통 UI를 구성하고 React Element를 만들 수 있습니다.

 

그렇다면 JSX만 있다고 바로 Javascript를 실행할 수 있을까요?

안됩니다. 그렇다면 어떻게 브라우저에서 해석할까요?? 바로 Babel이 React의 JSX를 우리가 아는 Javascript로 컴파일 해줍니다.

 

JSX의 컴파일 순서는 다음과 같습니다. 

 

JSX --->>> Babel(Compile)  --->>> JavaScript --->>> Browser(Chrome, Firefox, Edge)

 

React는 DOM과 다르게 JSX와 CSS만으로도 웹앱을 개발할 수 있습니다.  또 DOM 코드보다 좀 더 직관적으로 짧은 코드로 더 많은 일을 할 수 있고 개발프로젝트가 커져도 관리하기 더 용이합니다. 왜냐하면 "컴포넌트"구조로 되어있기 때문이죠.

 

컴포넌트란 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다. 

 

같은 기능을 구현할 때 DOM 코드와 JSX 코드를 비교하면 다음과 같습니다. 

 

DOM 코드

return React.createElement(
"h1", null, `Hello, ${formatName(user)}!`
)

 

JSX 코드

return <h1>Hello, {formantName(user)}!</h1>;

 

위 부분은 짧은 코드이고 좀 더 긴 코드로 JSX와 DOM 코드를 비교하면 다음과 같습니다.

 

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  // return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

 

 

JSX에 표현식 포함하기 

 

JSX 문법은 보통 중괄호 안에서 동작합니다. {} 

다음과 같이 변수를 선언하고 {} 안에 적용합니다.

 

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

 

 

위 예시외에 다음과 같이 function 호출값, 객체값 등 다른 방식으로도 적용할 수 있습니다.

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

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

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

 

 

 

출처 : 코드스테이츠, 리액트 공식문서