JSX란

JSX란 컴포넌트의 UI를 표현하기 위해서 사용하는 자바스크립트 확장 문법입니다. JSX는 브라우저에서 실행될 수 없기 때문에 바벨을 통해 일반 자바스크립트 형태로 변환되는 과정을 거쳐야 합니다. 주로 클래스형 컴포넌트의 render 함수, 함수형 컴포넌트의 return 부분에 JSX가 위치하게 됩니다.

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

JSX의 장점

JSX를 사용하지 않고 UI를 표현하는 것은 굉장히 복잡합니다. 아래는 위의 JSX를 자바스크립트 문법으로 표현한 것입니다. 한눈에 보이기에도 구조를 파악하기 힘들고 코드를 작성하기 힘들어 보입니다. 실제 업무에서 아래와 같이 작성해야 했다면 업무의 생산성이 훨씐 떨어졌을 것입니다.

function App() {
  return React.createElement('div', null, 'Hello', 
    React.createElement('b', null, 'react));
}

JSX 문법

자바스크립트 표현

속성 정의

컴포넌트에 속성을 정의해야할 경우가 있습니다. 이때 두가지 방법으로 속성을 정의할 수 있습니다.

1. 속성 값이 문자열 리터럴인 경우
   속성의 값이 문자열 리터럴인 경우 따옴표를 이용하여 작성합니다.

function App() {
  return (
    <div className="0"></div>
  )
}

2. 자바스크립트 표현식 사용
   속성의 값이 문자열 리터럴이 아닌 경우 { }을 이용하여 작성합니다. 일반 변수 뿐 아니라 자바스크립트 표현식을 사용할 수 있습니다.

function App() {
  const imgName = 'image.jpg';
  return (
    <img src={imgName}></img>
  )
}

HTML에서 클래스를 정의할 경우 class를 사용하지만 JSX에서는 className을 사용합니다.

조건부 렌더링

특정 조건을 만족하는 경우만 UI를 렌더링 하고 싶은 경우도 존재할것입니다. JSX는 if를 제공하지 않습니다. 주로 삼항연산자와 AND연산자(&&)를 사용하여 조건부 렌더링을 표현합니다.

삼항연산자를 사용하는 경우는 특정 조건에 따라 다른 내용을 렌더링 할때 사용합니다.

function App() {
  const name = 'react';
  return (
    {name === 'react' ? (
       <div>react</div>
    ) : (
       <div>vue</div>
    )}
  )
}

AND 연산자를 사용하는 경우는 특정 조건일때만 렌더링하고 싶을때 사용합니다.

function App() {
  const name = 'react';
  return (
    {name === 'react' && <div>react</div>}
  )
}

주로 JSX를 render 함수 또는 return 문에서 작성하지만, 다른 위치에서도 사용할 수 있습니다.

리스트

배열에 담긴 요소를 활용하여 컴포넌트를 작성해야 하는 경우도 있습니다. JSX에서는 for를 지원하지 않기 때문에 리스트의 map 메소드를 이용합니다.

function App() {
  const array = [1, 2, 3, 4, 5];
  return (
    <ul>
      {array.map(item => <li key={item}>item</li>)}
    </ul>
  )
}

위와 같이 리스트를 통해 컴포넌트를 작성하는 경우 key 속성을 정의하여야 합니다. key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는데 도움을 줍니다. 이때 key는 해당 리스트 사이에서만 고유한 값을 가지면 됩니다. 다른 리스트의 항목과 key가 동일해도 문제가 없습니다.

주의 점

감싸인 요소

JSX를 작성 할때 최상위 부모는 오직 하나여야 합니다.

아래와 같이 최상위 부모가 여러 요소인 경우에는 에러가 발생합니다.

function App() {
  return (
    <div>리액트</div>
    <div>컴포넌트</div>
  )
}

아래와 같이 최상위 부모로 나머지 요소들을 감싸는 구조로 작성 하여야 합니다.

function App() {
  return (
    <div>
      <div>리액트</div>
      <div>컴포넌트</div>
    </div>
  )
}

만일 div로 감싸고 싶지 않은 경우에는 react 모듈에서 제공하는 Fragment 컴포넌트를 이용하면 됩니다.

import React, { Fragment } from 'react';
function App() {
  return (
    <Fragment>
      <div>리액트</div>
      <div>컴포넌트</div>
    </Fragment>
  )
}

Fragment는 아래처럼 간편하게 표현이 가능합니다. 이땐 Fragment는 import 하지 않아도 됩니다.

import React from 'react';
function App() {
  return (
    <>
      <div>리액트</div>
      <div>컴포넌트</div>
    </>
  )
}

undefined 렌더링 않기

해당 컴포넌트가 렌더링할 요소가 존재하지 않다는 것을 표현하기 위해서는 null을 반환하면 됩니다. 하지만 undefined를 반환하는 경우에는 에러가 발생합니다.

태그는 꼭 닫아야 한다

HTML에서는 단일태그의 경우 닫는 태그를 작성하지 않아도 문제가 되지 않습니다. 하지만 JSX는 닫는 태그를 무조건 작성해주어야 합니다.

아래처럼 닫는 태그를 작성하지 않으면 에러가 발생합니다.

function App() {
  return (
    <br>
  )
}

자식이 없는 경우에는 아래처럼 태그를 닫을 수 있습니다.

function App() {
  return (
    <br />
  )
}

주석

JSX에서 주석을 사용하기 위해서는 표현식 내부에 작성하여야 합니다.

function App() {
  return (
    // 주석1
    /* 주석2 */
    <div>리액트</div>
    {/* 주석3 */}
  )
}

위와 같이 작성 하는 경우 아래와 같이 화면에 보이게 됩니다.

// 주석1
/* 주석2 */
리액트