[React] JSX

JSX 이해하기

jsx란 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

1. JSX의 장점

1.1 보기 쉽고 익숙하다.

일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해 봅시다.
JSX를 사용하는 편이 더 가독성이 높고 작성하기도 쉽다고 느껴질 것입니다. 결국 HTML 코드를 작성하는 것과 비슷하기 때문일겁니다.

1.2 더욱 높은 활용도

JSX에서는 우리가 알고있는 div나 span같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 JSX안에서 작성할 수 있습니다.

2. JSX 문법

2.1 감싸인 요소

App.js를 이렇게 작성해봤다.

import './App.css';

function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>잘 부탁해~</h2>
  );
}

export default App;

그러면 오류가 뜨는 것을 확인할 수 있다. 이유는 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문이다. 이 오류를 다음과 같이 해결할 수 있다.

import './App.css';

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 부탁해~</h2>
    </div>
  );
}

export default App;

2.2 자바스크립트 표현

자바스크립트 문법 또한 표현할 수 있다. JSX 내부에서 코드를 { } 로 감싸면 된다.
자바스크립트 값을 한번 더 렌더링 해보겠습니다.

import React from 'react';
import './App.css';

function App() {
  const myNmae="계홍";
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>난 {myNmae}이야, 잘 부탁해~</h2>
    </div>
  );
}

export default App;

2.3 if문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.
하지만 조건에 따라 다른 내용을 렌더링해야 할 때에 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.

import React from 'react';
import './App.css';

function App() {
  const name="리액트";
  return (
    <div>
      {name === '리액트'?(
        <h1>리액트입니다.</h1>
      ):(
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}

export default App;

이렇게 코드를 작성하고 저장하면 브라우저에서 '리액트입니다.'라는 문구를 볼 수 있다. 하지만 name값을 다른 값으로 바꾸면 '리액트가 아닙니다'가 나타날 것입니다.