[React] ③ JSX란?

JSX란 무엇이며 어떻게 사용할까요? 리액트 프로젝트를 시작하며 새롭게 생성된 파일을 열어보면 익숙하면서도 다소 생소한 구문으로 작성된 것을 확인할 수 있습니다. 이를 JSX라고 하는데요.

JSX란?

JSX는 JavaScript XML을 의미하며, 자바스크립트를 확장한 문법입니다. 리액트에서 요소를 생성하고 제어하는 데 사용합니다. 먼저, 간단한 예시를 살펴보도록 하겠습니다.

// JSX를 사용한 코드
return (
    <div>
        <h2>Let's get started!</h2>
        <Expense items={expenses} />
    </div>
);

// JSX를 사용하지 않은 코드
return React.createElement(
    'div', {},
    React.createElement('h2', {}, "Let's get started!"),
    React.createElement(Expense, { items: expenses })
);

위의 두 코드는 동일한 기능을 수행합니다. 그러나 JSX가 자바스크립트에 비해 훨씬 간결하다는 것을 알 수 있습니다.

 

그렇다면 어떻게 서로 다른 코드가 동일한 기능을 수행하는 것일까요? 바로, JSX로 작성된 코드는 컴파일러를 통해 자바스크립트 코드로 변환되기 때문입니다. 즉, 처음에 작성한 코드는 컴파일러를 통해 두 번째 코드로 변환됩니다. 정리하자면 JSX는 바닐라 자바스크립트 보다 쉽게 코드를 작성할 수 있게 도와주는 문법입니다.

 

JSX 코드를 자세히 들여다보면 HTML과 상당히 유사한 구조라는 것을 확인할 수 있습니다. 그러나 보다 정확히 말하자면 이는 자바스크립트 코드이며, function 키워드를 활용한 함수형 컴포넌트를 사용하고 있습니다.

JSX 사용 방법과 규칙

JSX는 하나의 문법으로 규칙이 존재합니다.

• 컴포넌트에 여러 요소가 있을 경우 반드시 하나의 부모 요소로 감싸줘야 합니다. 이는 하나의 컴포넌트는 하나의 DOM 트리 구조로 이뤄져야 하는 버추얼 DOM 비교 규칙 때문입니다. 보통은 부모 요소에 div를 사용하나 Fragment 또는 <>를 사용할 수도 있습니다.
• 또한 태그를 열었으면 반드시 닫아주어야 하며, 태그 사이에 내용이 들어가지 않는 경우 셀프 클로징 (<div />을 사용합니다.
• 자바스크립트 코드를 사용하려면 {}안에 코드를 작성합니다.
• if문을 사용할 수는 없으며, 대안으로 삼항 연산자를 사용할 수 있습니다. && 또는 ||를 통해 조건부 렌더링을 할 수도 있습니다.
• DOM 스타일 추가 시에는 인라인 표기법을 사용하지 않고 카멜 표기법(camelCase)를 사용하여 객체로 스타일을 적용합니다.
• 자바스크립트에서 사용하는 class, for를 바로 사용할 수는 없으며, className,htmlFor를 사용합니다.
• 주석은 {/* 이렇게 작성할 수 있습니다. **/}*

마치며

리액트에서는 JSX 구문을 사용합니다. HTML과 비슷하지만 실제로는 자바스크립트 객체입니다. JSX를 통해 리액트 컴포넌트 파일에서 코드를 작성하면 자바스크립트로 컴파일 되어 실행됩니다.