React JSX 알아보기

React JSX 알아보기

 

React JSX에 대해 정리한 내용입니다.

 

 

1. JSX

---

JSX(JavaScript Syntax Extension)는 React에서 사용하는 JavaScript 확장 문법입니다. XML과 비슷하게 생겼으며 작성한 코드는 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태로 변환됩니다. JSX는 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높습니다. 또한 HTML 태그도 사용이 가능하고 내부에 컴포넌트도 작성이 가능하여 활용도가 높습니다.

 

JSX의 기본적인 문법에 대해 알아보겠습니다.

 

 

1.1. 태그 감싸주기

 

다음과 같이 코드를 작성하고 실행하면 에러가 발생합니다.

import React from 'react';

function App() {
    return (
        <span>Hello</span>
        <span>React</span>
    );
}

export default App;

Failed to compile.

./src/App.js
SyntaxError: /src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. 
Did you want a JSX fragment <>...</>? (33:2)

  31 |  return (
  32 |          <span>Hello</span>
> 33 |          <span>React</span>
     |          ^
  34 |  );
  35 | }
  36 |

 

이러한 경우 다음과 같이 하나의 최상위 요소로 감싸주어야 합니다.

import React from 'react';

function App() {
    return (
        <div>
            <span>Hello</span>
            <span>React</span>
        </div>
    );
}

export default App;

 

리액트에서는 여러 요소를 하나의 요소로 감싸주어야 합니다. 이렇게 하는 이유는 Virtual DOM에서 변화를 감지할 때 효율적인 비교를 위해서 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야하는 규칙이 적용되기 때문입니다. 

 

감싸주는 요소로 div 대신 Fragment를 사용할 수 있습니다. Fragment를 사용하면 브라우저에서 별도의 요소로 렌더링되지 않기 때문에 단순히 감싸기만을 위한 용도로 사용할 수 있습니다. 

import React, { Fragment } from 'react';

function App() {
    return (
        <Fragment>
            <span>Hello</span>
            <span>React</span>
        </Fragment>
    );
}

export default App;

 

<Fragment> 대신에 <> 형태로 사용해도 동일하게 동작합니다.

import React from 'react';

function App() {
    return (
        <>
            <span>Hello</span>
            <span>React</span>
        </>
    );
}

export default App;

 

이외에도 반드시 닫아줘야 하는 태그가 있습니다. <input> 또는 <br>과 같은 태그들을 HTML에서 사용할 때는 닫지 않은 상태로 작성해도 문제가 없지만 JSX에서는 에러가 발생합니다.

import React from 'react';

function App() {
    return (
        <>
            <span>Hello</span>
            <span>React</span>
            <input>
            <br>
        </>
    );
}

export default App;

Failed to compile.

./src/App.js
SyntaxError: /src/App.js: Unterminated JSX contents. (37:5)

  35 |                  <input>
  36 |                  <br>
> 37 |          </>
     |             ^
  38 |  );
  39 | }
  40 |

 

이러한 태그들은 반드시 닫아주어야하고 self-closing 형태로도 닫아줄 수 있습니다.

import React from 'react';

function App() {
    return (
        <>
            <span>Hello</span>
            <span>React</span>
            <input></input>
            <br/>
        </>
    );
}

export default App;

 

 

1.2. JavaScript 값 사용하기

 

JSX 내부에서 {} 를 사용하면 자바스크립트 값을 표현할 수 있습니다.

import React from 'react';

function App() {
    const name = 'React';

    return (
        <>
            <span>Hello</span>
            <span>{name}</span>
        </>
    );
}

export default App;

 

 

1.4. 조건부 렌더링

 

JSX에서는 if문을 사용할 수 없는 대신에 다음과 같이 삼항 연산자를 조건문으로 사용하여 렌더링 할 수 있습니다.

import React from 'react';

function App() {
    const name = 'React';

    return (
        <>
            {
                name === 'React' ?
                (
                    <span>React</span>
                ) : (
                    <span>Not React</span>
                )
            }
        </>
    );
}

export default App;

 

또한 AND(&&), OR(||) 연산자도 렌더링을 위한 조건문으로 사용할 수 있습니다.

import React from 'react';

function App() {
    const name = 'React';

    return (
        <>
            {name === 'React' && <span>React</span>}
        </>
    );
}

export default App;

import React from 'react';

function App() {
    const name = undefined;

    return (
        <>
            {name || 'value is undefined.'}
        </>
    );
}

export default App;

 

 

1.5. 인라인 스타일링

 

DOM에 스타일을 적용할 때는 객체 형태로 넣어주어야 합니다. 스타일에 사용되는 프로퍼티 이름 중에서 '-' 문자가 포함되는 경우엔 카멜 표기법으로 변경해서 작성해주어야 합니다.

import React from 'react';

function App() {
    const name = 'React';
    const style = {
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '24px',
        padding: 10,
        textAlign: 'center'
    };

    return (
        <>
            <div style={style}>{name}</div>
        </>
    );
}

export default App;

 

또한 다음과 같이 요소 내에 직접 작성해주어도 됩니다.

import React from 'react';

function App() {
    const name = 'React';

    return (
        <>
            <div style={{
                backgroundColor: 'black',
                color: 'aqua',
                fontSize: '24px',
                padding: 10,
                textAlign: 'center'
            }}>{name}</div>
        </>
    );
}

export default App;

 

요소에 css 클래스를 적용하기 위해서는 HTML에서 사용하는 'class' 대신에 'className'을 사용합니다.

.title {
    background-color: black;
    color: aqua;
    font-size: 24px;
    padding: 10px;
    text-align: center;
}

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

function App() {
    const name = 'React';

    return (
        <>
            <div className="title">{name}</div>
        </>
    );
}

export default App;

 

 

1.6. 주석

 

주석은 다음과 같이 작성합니다. 최상위의 감싸주는 요소 안에서만 작성이 가능합니다. Fragment 태그를 사용할 경우에도 하위에 주석을 작성할 수 있지만 Fragment 시작 태그 내부에는 작성할 수 없습니다.

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

function App() {
    const name = 'React';

    return (
        <>
            {/* JSX 내부의 주석 */}
            <div className="title"
                // 시작 태그 내부의 주석
            >{name}</div>
        </>
    );
}

export default App;

 

이상으로 React JSX에 대해 알아봤습니다.

 

 

※ Reference

 

• reactjs.org, Introducing JSX, https://reactjs.org/docs/introducing-jsx.html
• react.vlpt.us, 4. JSX의 기본 규칙 알아보기, https://react.vlpt.us/basic/04-jsx.html
• velopert.com, 누구든지 하는 리액트 3편: JSX, https://velopert.com/3626
• 『리액트를 다루는 기술』 길벗(2019) 김민준 지음, 2장 JSX (p56 ~ p76)