JSX

KOO HEESEUNG·2021년 6월 27일

JavaScript React front end

React.js

목록 보기

3/3

(예시 코드 일부에서는 import, export 구문을 생략했음.)

1. JSX란?

JSX는 자바스크립트의 확장 문법으로, XML과 비슷하게 생겼다. JSX 코드는 브라우저에서 실행되기 전에 바벨을 사용하여 아래와 같이 일반 자바스크립트 형태로 변환된다.

// JSX
function App() {
  return (
  	<div>
    	Hello <b>react</b>
    </div>
  );
}

// 위 JSX 코드가 JavaScript로 변환되었을 때의 모습
function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

바벨?

바벨(Babel)은 최신 자바스크립트 문법을 다른 환경에서의 호환성을 위해 이전 버전의 문법으로 재작성해주는 오픈소스 자바스크립트 컴파일러이다.

✔︎ 참고

What is Babel?

2. JSX의 장점

보기 쉽고 익숙하다.
높은 활용도
- JSX는 HTML 태그뿐 아니라 새로 만들 컴포넌트도 작성이 가능하다. App.js를 통해 App 컴포넌트를 만들었다면, 다른 JS 파일에서 과 같은 식으로 HTML 태그 쓰듯이 작성하여 컴포넌트를 사용할 수 있다.

3. JSX 문법

3.1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

function App() {
  return (
  	<div>
    	<h1>리액트</h1>
      <h1>JSX</h1>
    </div>
  )
}

이렇게 하나의 요소로 감싸주는 이유는 컴포넌트 내부가 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 이러한 규칙은 Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적인 비교가 가능하도록 하기 위함이다.

div 요소를 사용하고 싶지 않다면 Fragment 라는 컴포넌트로 감싸줄 수 있다.(리액트 v16 이상부터) Fragment를 사용하기 위해서는 import 구문에서 react 모듈에 들어있는 Fragment 컴포넌트를 추가로 호출하면 된다.

import React, { Fragment } from 'react';

function App() {
  <Fragment>
  	<h1>리액트</h1>
    <h1>JSX</h1>
  </Fragment>
}

Fragment는 아래와 같이 표현할 수도 있다.

import React from 'react';

function App() {
  <>
  	<h1>리액트</h1>
  	<h1>JSX</h1>
  </>
}

3.2. 자바스크립트 표현

JSX 안에서 자바스크립트 표현식을 작성하려면 코드를 { } 로 감싸면 된다.

function App() {
  const book = "그리고 아무도 없었다"
  return (
  	<>
    	<h1>어제 읽은 책은 {book}입니다.</h1>
      <h2>재미있었습니다.</h2>
    </>
  )
}

3.3. 조건부 렌더링

JSX에서는 if-else문을 사용할 수 없기 때문에 { } 안에 삼항 연산자를 이용하면 된다.

또한 특정 조건을 만족할 때만 내용을 보여주고, 만족하지 않으면 렌더링하지 않는 경우에는 AND 연산자(&&)를 사용하여 삼항연산자보다 더 간단히 표현할 수 있다.

function App() {
  const country = '미국';
  return <div>{country === '한국' && <h1>한국인입니다.</h1>}</div>;
}

3.4. undefined 렌더링 금지

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링할 경우 에러가 발생한다. 따라서 어떤 값이 undefined일 수 있다면, OR 연산자(||)를 사용하여 값이 undefined일 때 사용할 값을 지정하여 에러를 방지할 수 있다.

function App() {
  const name = undefined;
  return name || '값이 없습니다.';
}

반면, 아래 코드와 같이 JSX에서는 undefined 렌더링이 가능하다.

function App() {
  const name = undefined;
  return <div>{name}</div>;
}

3.5. Inline Style

JSX 내부에서 스타일을 설정할 때는 String 형식이 아닌 key가 카멜 표기법으로 작성된 객체 형태로 넣어주어야 한다.

ex) background-color -> backgroundColor

3.6. className

일반 HTML에서는

이런 식으로 class를 설정했지만, JSX에서는

이렇게 class 가 아닌 className 이라고 작성해야 한다.

3.7. 태그 닫기

HTML에서는 <input> 이라고만 작성해도 문제없었지만 JSX에서는 <input></input> 이런 식으로 반드시 태그를 닫아주어야 한다. 그러나 태그 사이에 별도의 내용이 들어가지 않을 경우에는 <input /> 이런 식으로 self-closing 해주어도 된다.

3.8. 주석

JSX 내부에서의 주석은 {/* */} 와 같은 형식으로 작성한다.

KOO HEESEUNG

이전 포스트

JSX