What is JSX

mje807·2021년 6월 16일
1

JSX를 왜 쓸까

HTML(HyperText Markup Language)은 다양한 태그들이 DOM에 트리구조를 이루어 구성되며 DOM 안에 구성된 요소들이 화면에 나타나게 됩니다.
문법은 이름 그대로 마크업 형식을 따르고 있으며, 가장 상위(root)태그로부터 아래로 트리구조를 이루어 구성됩니다.

React에서는 화면을 구성하기 위해서 React Element를 ReactDOM에 구성하며 추상적으로 구성된 ReactDOM을 통해 화면을 나타냅니다.
이러한 과정에서 React는 React Element를 ReactDOM에 렌더링하기 위해서 아래와 같은 코드를 작성합니다.

ReactDOM.render(
 React.createElement(‘div’, null, ‘HelloWorld’),
  document.getElementById('root')
);

React Element를 생성하기 위해서 React.createElement 함수를 사용하는데, 함수의 첫번쨰 인자는 HTML태그의 종류가 올 수 있으며, 두번째 인자로는 props, 세 번쨰 인자로는 children을 넣어줍니다. 위의 구조에서 div 태그 안에 자식 DOM을 생성하기 위해서는 중첩된 함수구조로 코드를 작성해야 하는데, 이는 가독성이 떨어질 뿐만아니라 코드를 작성하기에 매우 불편한 구조를 가집니다.

JSX는 이러한 불편함을 해결해주기 위해 JavaScript 코드 내부에서 마크업 문법을 사용할 수 있게 도와줍니다.
위에서 작성된 코드는 다음과 코드와 똑같이 동작할 수 있습니다.

ReactDOM.render(
  <div>HelloWorld</div>,
  document.getElementById('root')
);

JSX문법을 사용한 코드는 코드의 가독성 뿐만아니라 관심사분리(SoC: Separation of Concerns)를 통해 로직과 화면요소를 분리하여 관리할 수 있습니다.
이러한 JSX문법은 일반적인 웹 브라우저에서 동작하기 위해서 BABEL을 통해서 사용할 수 있게 변경됩니다.

BABEL이란

BABEL은 JavaScript를 컴파일해주는 컴파일러의 역활을 하고 있습니다. 하지만 웹 환경에서 인터프리터 언어인 JavaScript가 컴파일 되어야 하는 이유는 무엇일까요.
현재 JavaScript의 버전은 ECMAScript 2020까지 존재하며 가장 최신버전을 의미하는 ES.Next버전 까지 존재합니다. 하지만 모든 브라우저가 항상 최신버전의 JavaScript를 지원하지 않습니다. 따라서 최신버전의 JavaScript는 각각의 브라우저에 하위호환이 가능한 버전의 JavaScript로 변환하여 사용되게 되는데, 이때 BABEL은 소스대 소스로 JavaScript를 하위버전으로 컴파일해주는 역할을 하고있습니다.
또한 하위버전으로의 컴파일 뿐만아니라 JavaScript의 정적 타입을 지원하는 TypeScript또한 BABEL에 의해서 원하는 버전의 JavaScript로 컴파일이 가능합니다.
마찬가지로 JSX문법 또한 BABEL에 의해서 JavaScript 문법으로 컴파일되어 사용됩니다.

앞선 포스팅에서 App.js파일에서도 이미 JSX문법을 사용하여 컴포넌트를 구성한 모습을 확인할 수 있습니다. BABEL에서는 JSX와 ES6버전의 JavaScript가 BABEL에 의해서 어떻게 변환되는지 확인해 볼 수 있습니다.

JSX 문법

  1. JSX문법은 JavaScript의 문법의 확장입니다 또한 HTML과 같은 Markup 형식을 사용하기 때문에 구조가 유사합니다.
const element = (
  <div>
      <h1>Hello! my name is Jong</h1>
     <h2>Have a nice day!</h2>
  </div>
);
  1. JSX에서는 중괄호 안에서 JavaScript의 표현식을 사용할 수 있습니다.
const name = 'Jong';
const greet = 'Have a nice day!';

const element = (
  <div>
    <h1>Hello! my name is {name}</h1>
    <h2>{greet}</h2>
  </div>
);
  1. 태그는 항상 닫아주어야 하며, 빈 태그는 바로 닫아줄 수 있습니다.
// Failed to compile!!
const element = (
  <div>
    <h1>Expected corresponding JSX closing tag for 'h1'
  </div>
)
const imageName = 'image.png';
const element = <img src={imageName} />;
  1. 모든 JSX 문법은 Babel을 통해서 createElement() 로 컴파일되어 사용됩니다.

마치며

React에서는 렌더링되는 UI요소들이 각각의 로직들과 결합되어 사용됩니다.(이벤트 처리, 선택적 렌더링 등등) JSX는 이러한 UI요소들과 로직간에 연결에 적지않은 도움을 줄 수 있습니다.
JSX는 일반적인 템플릿 언어라고 볼 수도 있겠지만, React에서 사용하기에 아주 적절한 방식입니다. 물론 React에서 JSX가 필수적인 요소는 아닙니다. 하지만 JSX로 잘 마크업된 코드의 구문들과 적절하게 배치되는 Javscript 구문들로 개발자로부터 코드를 한결 간편하게 확인할 수 있도록 도움을 줍니다.

profile
🇰🇷🧑‍💻

0개의 댓글