jsx 란 무엇인가?

jsx 란 무엇인가?

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a simple JSX example.</p>
    </div>
  );
};

 

간단히 말해서 JSX는 JavaScript 코드 내에서 HTML과 유사한 코드를 작성할 수 있게 해주는 JavaScript용 구문 확장입니다. 원래 React 프레임워크와 함께 사용하기 위해 Facebook에서 만들었습니다.


위의 예에서는 화살표 함수 구문을 사용하여 App이라는 기능 구성 요소를 정의합니다. return 문 안에 <h1> 및 <p> 요소가 중첩된 <div> 요소를 반환하는 JSX 표현식이 있습니다. 이것은 HTML 코드를 작성하는 방법과 비슷하지만 속성 값과 닫는 태그에 큰따옴표를 사용하는 대신 중괄호를 사용하여 내용이 없는 요소에 JavaScript 표현식과 자체 닫기 태그를 포함합니다.


JSX 코드가 컴파일되면 HTML 요소를 나타내는 JavaScript 객체 트리를 생성하는 React의 createElement 함수를 사용하여 일반 JavaScript 코드로 변환됩니다. 그런 다음 브라우저에서 렌더링되는 실제 DOM을 업데이트하는 데 사용됩니다.

 

 

JSX는 자바스크립트에서 XML을 추가한 확장형 문법입니다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다1.

 

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

위 코드는 다음과 같은 일반적인 자바스크립트 코드로 변환됩니다:

 

const element = React.createElement("h1", null, "Hello, world!");

JSX를 사용하면 HTML과 유사한 구문으로 UI 구조를 작성할 수 있어서 가독성이 좋아집니다