[1] JSX란?

JSX(JavaScript XML)는 자바스크립트에 XML 파일이 더해진 파일이다.

• 그냥 자바스크립트에서 html까지 같이 쓸 수 있는 확장된 문법이라고 생각하면 된다.
• JSX를 빌드하게 되면 바벨이 자바스크립트 코드로 변경을 해준다.
• JSX에서 작성되는 HTML코드들을 사실 HTML코드가 아닌 XML코드이다. 그래서 HTML과 문법 약간씩 다른것이다.

HTML, JSX 코드 차이

// HTML
<button onclick="func()"> 버튼 </button>

//JSX
<button onClick={func} > 버튼 </button>

[2] JSX의 장점

1개의 파일에 HTML과 JS를 동시에 작성하고 쉽게 JS를 사용할 수 있다.
{} 중괄호를 이용해서 자바스크립트 표현식을 사용할 수 있다.

const 컴포넌트 = () => {
    let num = 10;
    return (
        <div>
            <div> {num} </div> // 10이 웹페이지에서 보인다.
        </div>
    );
}

=== , ||, &&, ?:(삼항연산자) 과 같은 연산자를 이용하여 보여주고 싶은 내용만을 보여줄 수 있다.

const 컴포넌트 = () => {
    let num = 10;
    return (
        <div>
            <div> {num===10 && <span> 10 </span>} </div>
            <div> {num===10 ? <span> 10이다 </span> : <span> 10이 아니다 </span>} </div>
        </div>
    );
}

[3] JSX를 사용할 때 주의할점

컴포넌트 처음에 반드시 부모요소 1개로 감싸주어야 한다.

Virtual DOM에서 변화감지를 쉽게 비교하기 위해서 컴포넌트를 1개의 태그로 감싸주어 1개의 DOM트리 구조로 만들기 위해서이다.

const 컴포넌트 = () => {
    return (
        <div>
            <div> 나머지 코드 작성 </div>
            <div> </div>
        </div>
    );
}

아래와 같이 2개의 태그를 사용하면 에러가 발생한다.

const 컴포넌트 = () => {
    return (
        <div>
            <div> 나머지 코드 작성 </div>
        </div>
        <div> </div> // 이 태그는 지워주어야 한다.
    );
}

HTML에서 사용하던 class를 className으로 사용해야 한다. ( class는 클래스와 겹침)
JSX에서는 label태그에서 사용하는 for가 예약어여서 htmlFor를 사용한다.

const 컴포넌트 = () => {
    return (
        <div>
            <div className="클래스명"> 나머지 코드 작성 </div>
            <input id="" />
            <label htmlFor=""> </label>
        </div>
    );
}

컴포넌트의 리턴값은 undefined가 되서는 안된다.
onclick -> onClick 과 같이 JSX에서는 카멜표기법을 사용을 한다,
html 주석은 이지만 JSX 주석은 /* */이다