리액트 JSX 문법

JSX란?

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

 

예를 하나 들어봅시다.

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

이렇게 작성된 코드를 다음과 같이 변환됩니다.

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

만약 컴포넌트를 랜더링할 때마다 JSX 코드를 작성하는 것이 아니라 위와 같은 코드로 매번 React.createElement를 호출해야 한다면 매우 불편할 것이다.

JSX의 장점

1. 보기쉽고 익숙하다.

일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교하면 금방 답 나온다.

 

2. 더욱 높은 활용도

JSX에서는 우리가 알고 있는 div나 span같은 태그말고도, 앞으로 만들 컴포넌트들도 JSX 안에서 작성할 수 있습니다. App.js에서는 App 컴포넌트가 만들어졌지요? src/index.js 파일을 열어보면 이 App 컴포넌트를 마치 HTML 태그 쓰듯이 그냥 작성합니다.

JSX문법

감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다. 한번에 App.js 파일의 App 컴포넌트 함수 내부를 지우고 다음과 같이 작성해 보세요

import React from 'react'

function App(){
  return(
    <h1>리액트 안녕</h1>
    <h2>잘 동작하니?</h2>
  )
}

export default App;

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생했습니다. 이 오류는 다음과 같이 코드를 작성하여 해결할 수 있습니다.

import React from 'react'

function App(){
  return(
    <div>
      <h1>리액트 안녕</h1>
      <h2>잘 동작하니?</h2>
    </div>
    /*
    <div>
      <div>리액트 안녕</div>
      <div>잘 동작하니?</div>
    </div>
    */
  )
}

export default App;

지금은 h1, h2 태그로 했지만 저 둘 태그 대신 div 2개를 사용해도 1개의 div로 그것들을 감싸줘야합니다. 그런데 리액트 컴포넌트에서 왜 이렇게 꼭 감싸주어야 할까요? 그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙때문입니다.

 

다행히 이 부분을 보완한 기능이 있는데 이렇게 매번 감싸주기 귀찮을 땐 Fragment라는 기능을 사용하면 됩니다.

그리고 더 간단한 <> 문법으로 표현할 때는 Flagment를 import할 필요도 없습니다.

import React, {Fragment} from 'react'

function App(){
  return(
    <Fragment> or <>
      <h1>리액트 안녕</h1>
      <h2>잘 동작하니?</h2>
    </Fragment> or </>
  )
}

export default App;

자바스크립트 표현

JSX가 단순히 DOM 요소를 랜더링하는 기능밖에 없었다면 뭔가 아쉬울 것입니다. 하지만 JSX 안에서 JS 표현식을 쓸 수 있습니다. { }로 코드만 감싸면 됩니다.

import React from 'react'

function App(){
  const name = "리액트";
  
  return(
    <>
      <h1>{name} 안녕</h1>
      <h2>잘 동작하니?</h2>
    </>
  )
}

export default App;

if문 대신 조건부 연산자

JSX에서는 if문을 사용할 수 없습니다. 그 대신 삼항연산자를 사용하여 대체하면 됩니다.

 

AND 연산자(&&)를 사용한 조건부 렌더링

import React from 'react'

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

export default App;

위 코드와 같이 null을 랜더링하면 아무것도 보여주지 않습니다. 하지만 이것보다 더 짧게 코딩할 수 있습니다.

import React from 'react'

function App(){
  const name = "리액트";
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>} </div>;
}

export default App;

&& 연산자로 랜더링할 수 있는 이유는 리액트에서 false를 랜더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다. 여기서 한 가지 주의해야할 점이 있는데요, falsy한 값인 0은 예외적으로 화면에 나타난다는 것입니다.

const number = 0;
return number && <div>내용</div>

이런 코드는 화면에 숫자 0을 보여줍니다.

 

undefined를 랜더링하지 않기

import React from 'react'

function App(){
  const name = undefined;
  return name;
}

export default App;

위와같은 코드를 실행하면 다음과 같은 오류를 볼 수 있습니다.

어떤 값이 undefined일 수도 있다면, OR( || ) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있습니다.

import React from 'react'

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

export default App;

인라인 스타일링

import React from 'react';

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16
  }
  return (
     <div style = {style}>{name}</div>
  );
}

export default App;

class 대신 className 

일반 html에서 css 클래스를 사용할 때는 <div class='myclass'></div>와 같이 class라는 속성을 설정합니다. 하지만 JSX에서는 class가 아닌 className으로 설정해주어야 합니다.

 

src/App.css에 다음과 같이 작성해봅니다.

.react {
    background: black;
    color: tomato;
    font-size: 48px;
    font-weight: bold;
    padding: 16px;
}

그리고 본문에는 다음과 같이 변경합니다.

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

function App() {
  const name = '리액트';
  return (
     <div className="react">{name}</div>
  );
}

export default App;

 사실 이제는 class를 써서 오류를 일으키지 않고 변환을 해주지만 그래도 문법을 명확하게 사용하는게 더 올바르기 때문에 class라 사용하지 않고 className으로 사용하길 권합니다.

 

주석 사용하는 법

주석은 그냥 /**/ 나 // 를 사용하면 되던 방식과는 달리 JSX에서는 { } 으로 감싸서 주석을 사용해야 정상적으로 숨김 처리가 됩니다. { /*이것은 주석이지*/ }