[JSX] 자주 찾아볼 것 같은 JSX 정리

1. JSX는 뭘까?

JSX는 JavaScript의 확장 문법이며 XML과 매우 비슷하다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 JavaScript 형태의 코드로 변환된다.

 

2. 그럼 JSX도 JS일까?

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

 

3. JSX 문법 (1) - 감싸인 요소

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

 

src/App.js

import React from 'react';

function App() {
    return (
        <h1> 리액트 안녕! </h1>
        <h2> 과자 먹고 싶다.</h2>
    )
}

export default App;

이런 형태의 코드는 오류가 뜬다.

요소 여러 개(<h1>, <h2>)가 부모 요소 하나에 의하여 감싸져 있지 않기 때문이다.

이러한 오류는 아래와 같이 해결할 수 있다.

 

src/App.js

import React from 'react';

function App() {
    return (
        <div>
            <h1> 리액트 안녕! </h1>
            <h2> 과자 먹고 싶다.</h2>
        </div>
    )
}

export default App;

또는 Fragment라는 기능을 사용할 수도 있다.

 

src/App.js

import React, {Fragment} from 'react';

function App() {
    return (
        <Fragment>
            <h1> 리액트 안녕! </h1>
            <h2> 과자 먹고 싶다.</h2>
        </Fragment>
    )
}

export default App;

또는

import React, {Fragment} from 'react';

function App() {
    return (
        <>
            <h1> 리액트 안녕! </h1>
            <h2> 과자 먹고 싶다.</h2>
        </>
    )
}

export default App;

이런 형태로 표현할 수 있다.

 

4. JSX 문법(2) - undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.

 

src/App.js

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

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

export default App;

이 코드를 실행시키면 다음과 같은 오류를 볼 수 있다.

App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

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

 

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

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

export default App;

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

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

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

export default App;

 

5. JSX 문법(3) - class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class 속성을 설정하지만 JSX에서는 class가 아닌 className으로 설정해야한다.

 

6. JSX 문법(4) - 꼭 닫아야 하는 태그

src/App.js

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

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

export default App;

위의 코드를 실행하면 </> 부분에서 오류가 발생한다.

이러한 오류를 해결하기 위해서는 아래와 같이 input 태그를 닫아줘야 한다.

 

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

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

export default App;

태그 사이에 들어가는 애용이 없는 경우에는 self-closing 태그를 사용할 수 있다. self-closing 태그는 태그를 선언하면서 동시에 닫을 수 있는 태그로 이해하면 된다.

 

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

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

export default App;

 

7. JSX 주석

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

 

 

 

[참고 문헌] (https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=204819510)

 

 

 

(전 블로그에서 2021.1.22일 16:48분에 작성한 글 입니다.)