[React] JSX 문법과 컴포넌트들 알아보기

React의 JSX 문법이란?

JSX는 리액트를 사용하면서 처음 접하게 된다. JSX를 사용하면 JS 문법을 마치 HTTP 태그처럼 사용할 수 있는데, 이는 페이스북(현 메타)에서 소개한 문법이다.

 

JSX는 ECMAScript의 일부가 아니기 때문에, 꼭 트랜스파일링 도구를 사용해 트랜스파일을 거쳐야 자바스크립트로 변환되어 자바스크립트 엔진이 이해할 수 있다.

 

JSX는 기본적으로 JSXElement, JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 이루어져있다고 한다.

---

JSXElement

JSXElement는 HTML의 element와 비슷한 역할을 하는데,

<JSXOpeningElement> </JSXClosingElement>

<JSXSelfClosingElemnt JSXAttributes(optional) />

<> </>

 

다음과 같은 세 형태로 사용할 수 있다. 이때 <> </> 빈 태그는 JSXFragment라고 부른다. 그냥 프레그먼트라고 해도 된다.

JSXElement의 이름은 항상 대문자로 시작해야하는데, 그 이유는 HTML 태그와 구분하기 위해서이다.

 

 

JSXAttributes

JSXElement의 두번째 형태에서도 확인할 수 있듯이, JSXAttributes는 JSXElement에 부여할 수 있는 속성을 의미한다.

 

보통 사용하는 JSXAttribute는 속성을 나타내는 키와 값으로 짝을 이루어서 표현한다.

<foo JSXAtrributeName={AttributeValue} />

 

 

Attribute의 값인 AttributeValue는 다음과 같은 세 가지 형태가 가능하다.

1. 큰 따옴표로 구성된 문자열
2. { 표현식 }
3. JSXElement

 

 

JSXChildren

JSXElement의 자식 값을 나타낸다. JSX는 트리 구조를 가지기 때문에 부모 자식 관계를 나타내는 것이 가능하다.

 

JSXChildren은 JSXChild가 없어도 상관없으며 0개 이상 가질 수 있다.

<><foo /></>

 

다음과 같이 JSX표현식을 넣는 것도 가능하다.

<>{(() ⇒ ’foo’)()}</>

JSXStrings

HTML에서 사용 가능한 모든 문자열은 JSXStrings에서도 가능하다. 이는 HTML의 내용을 쉽게 JSX로 가져올 수 있도록 의도적으로 설계됐다고 한다.

<button>hello</button>

 

JSX는 어떻게 자바스크립트에서 변환될까?

 

아까 언급했듯이 JSX는 자바스크립트 문법으로 변환되어야지만 자바스크립트 엔진에서 인식할 수 있다.

그를 위한 트렌스파일 도구 중 하나가 @babel/plugin-transform-react-jsx 플러그인이다.

( 현재 vite나 Next.js 등에서는 Babel 대신 훨씬 속도가 빠른 SWC, esbuild를 트랜스파일링 도구로 채택한다고 한다. )

 

다음은 Babel을 사용한 아주 간단한 예시이다.

 

만약 아래와 같은 JSX코드가 있다.

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

 

Babel 플러그인을 활용해 변환한다면 아래와 같은 코드가 된다.

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

 

 

 

Babel 플러그인은 JSXElement를 첫번째 인수로 선언해 요소를 정의하고, 옵셔널인 JSXChilderen, JSXAttributes, JSXStrings는 이후 인수로 넘겨서 처리한다.

 

이러한 특성을 활용하면 중복 코드를 최소할 수 있도록 리팩토링하는 것도 가능한데, 예를 들어 JSX가 변환되는 특성을 활용하면 JSXElement만 다르고 나머지가 동일한 상황에선, createElement를 이용해 간결하게 리팩토링할 수 있다고 한다.