JSX는 매우 강력한 기술입니다. 우리가 배워야 하는 모든 새로운 것들을 가지고, 약간의 학습 곡선이 있습니다. JSX를 사용할 때 몇 가지 문제점에 대해 이야기 하고자 합니다. JSX로 처음 시작할 때 간과 되는 몇 가지 일반적인 것들입니다.

JSX를 배우면 장기적으로 더 나은 JavaScript 개발자가 될 것이라는 확고한 신념을 갖고 있습니다. 

이 기사에서는 슬픔의 원인이 될 수 있는 JSX를 살펴 보겠습니다. JSX 템플릿을 작성할 때 이를 명심하십시오.

모든 요소에는 닫기 태그가 있어야 합니다. 

대다수의 HTML 요소에는 </div>와 같은 닫는 태그가 있습니다. 닫기 태그가 필요 없는 HTML 태그의 경우 JSX에 닫기 태그를 추가해야 합니다.

<img src=""> has to be <img src="" /> 

유효한 JSX 닫기 태그 

다음은 닫기 태그가 있는 유효한 JSX의 예입니다.

// VALID!

// with closing tag
<div>stuff</div>
<h1>title</h1>
<p>more stuff</p>

// self closing
<img />
<input />
<br />

// custom components
<MyComponent />
<MySidebar>stuff stuff stuff</MySidebar>

잘못된 JSX 닫기 태그 

다음은 JSX 요소를 만드는 잘못된 방법입니다.

// NOT VALID!

<img>
<input>
<br>

// custom components
<MyComponent>

반드시 하나의 부모 요소가 있어야 합니다. 

JSX에서 볼 수 있는 초기 문제 중 하나는 여러 요소를 반환하려는 경우입니다. 이것은 대부분의 웹 사이트와 앱이 하나 이상의 요소를 가질 것이므로 매우 일반적입니다.

예를 들어, <p> 태그 묶음이 있는 기사가 있습니다. 다음은 유효하지 않습니다.

​

// NOT VALID!

function App() {
    return (
        <p>first paragraph</p>
        <p>second paragraph</p>
    );
}

부모 요소가 없는 두 개의 <p> 태그가 서로 나란히 놓여 있습니다. 우리는 인접한 두 요소를 반환합니다. React는 우리를 도와 주며 오류를 보여줍니다 :

하나의 상위 랩퍼 요소가 있어야 합니다. 

다음은 유효하지 않습니다.

function App() {
    // not valid. multiple top-level elements
    return (
        <h1>title goes here</h1>
        <p>content stuffs here</p>
    );
}

이를 유효하게 만들기 위해서는 항상 1 래핑 요소가 있어야 합니다. <h1>과 <p>를 <div>로 묶습니다.

// VALID

function App() {

    // valid. only 1 top-level element (div)
    return (
        <div>
            <h1>title goes here</h1>
            <p>content stuffs here</p>
        </div>
    );
}

배치 요소는 무엇이든 될 수 있습니다. 그냥 항상 하나의 컨테이너가 있다는 것을 알아 두십시오.

조각 사용하기 

부모 요소를 원하지 않는 경우가 있을 수 있습니다. <td>가 있고 그 안에 <div>를 넣지 않으려 한다고 가정 해 보겠습니다.

예를 들어, td 내부에 블럭 레벨 요소 (div)를 가질 수 없기 때문에 이것은 유효한 HTML이 아닙니다.

// NOT VALID!

// create an item 
function Item() {
    return (
        <div>
            <td>Whoa</td>
            <td>Yea</td>
        </div>
    );
}

// create a table and use item
function App() {
    return (
        <table>
            <tr>

                <Item />

            </tr>
        </table>
    );
}

React는 실제 HTML 요소 대신 사용할 수 있는 Fragment를 제공합니다. 이제 <Item />을 다음과 같이 다시 작성할 수 있습니다.

// create an item 
function Item() {
    return (
        <React.Fragment>
            <td>Whoa</td>
            <td>Yea</td>
        </React.Fragment>
    );
}

가져올 때 Fragment를 제거 할 수도 있습니다.

import React, { Fragment } from 'react';


// create an item 
function Item() {
    return (
        <Fragment>
            <td>Whoa</td>
            <td>Yea</td>
        </Fragment>
    );
}

결론

JSX는 매우 강력한 도구입니다. 그 기능과 이점을 이해한다면 더 나은 JavaScript 개발자가 될 수 있습니다!