[React] ③ JSX란?

2023. 2. 10. 11:45·개발/React

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를 통해 리액트 컴포넌트 파일에서 코드를 작성하면 자바스크립트로 컴파일 되어 실행됩니다.

'개발 > React' 카테고리의 다른 글

[React] ② 리액트 프로젝트 시작 방법  (0) 2023.02.10
[React] ① 리액트 기초  (0) 2023.02.10
'개발/React' 카테고리의 다른 글
  • [React] ② 리액트 프로젝트 시작 방법
  • [React] ① 리액트 기초
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
마이리얼트립 프로모션 할인 🏝️
마이리얼트립 호텔 예약 배너
※ 배너를 클릭하여 상품 구매 시, 파트너스 활동에 대한 소정의 수수료를 지급받습니다. 구매자에게 추가로 부과되는 수수료는 없습니다.
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행 N
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남 N
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
[React] ③ JSX란?
상단으로

티스토리툴바