1. JSX

JSX 를 설명해보자

• 공식문서-OLD

• 공식문서-NEW

JSX는 XML처럼 작성된 마크업을 React.createElement를 쓰는 코드로 변환한다. 중괄호를 써서 JavaScript 코드를 그대로 쓸 수 있고, JavaScript 코드와 1:1로 매칭된다. 즉, JavaScript 파일 안에 HTML과 유사한 마크업을 작성할 수 있는JavaScript의 구문확장자이다.

JSX 를 활용하면 아래와 같은 작업이 가능하다.

• HTML과 같은 유사한 마크업 코드 작성 가능

• JavaScript 표현식 삽입 가능하여, 마크업 내에서 동적 콘텐츠와 JavaScript 코드 실행 가능

• 재사용이 가능하고 독립적인 UI 조각

요약하자면, 사용자 인터페이스를 정의하고 구축하는 프로세스를 단순화 하는 구문 확장이며, 동적 웹 애플리케이션의 개발을 보다 간단하고 효율적으로 만들어 유지보수성이 높다.

아래의 코드는 HTML도 아니고 JavaScript도 아닌 JSX 이다.

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

'.jsx' 확장자의 파일 안에 정의된 코드이고 JavaScript 의 구문확장이다. JSX는 React에서만 사용되는 것은 아니고 독립적으로 사용할 수 있다. React에서는 HTML 마크업과 로직을 인위적으로 분리하는 대신에 이 둘을 포함하는, 컴포넌트(Component) 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리하여 유지보수성을 높인다.

JSX 의 특징

HTML 유사 구문

JSX는 HTML과 유사해 UI 구조와 유사한 방식으로 태그와 속성을 작성할 수 있다.

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

JavaScript 표현식

JSX를 사용하면 중괄호 {} 안에 JavaScript 표현식을 삽입할 수 있다. 이를 통해 동적 콘텐츠를 마크업에 포함할 수 있다.

const name = "John";
const element = <h1>Hello, {name}!</h1>;

보통 React 구성요소와 함께 사용

React 에서만 JSX 가 사용되는 것은 아니며, 독립적으로도 사용할 수 있다. JSX 없이도 React 애플리케이션을 작성할 수 있지만, JSX를 사용하면 코드 유지보수성이 올라간다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="John" />;

변환 필요

JSX 코드는 브라우저에서 직접 인식되지 않으므로 표준 JavaScript로 변환해야 한다. 이 변환에 사용되는 도구 중의 하나가 Babel 이며, JSX를 브라우저가 실행할 수 있는 JavaScript 코드로 컴파일하는 데 사용된다. 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이 되고, JavaScript의 객체로 인식된다.

React 에서 JSX 사용의 샘플 코드

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React with JSX!</h1>
        <p>This is a JSX example.</p>
      </div>
    );
  }
}

export default MyComponent;