JSX란?

JSX란 무엇일까?

JSX는 JavaScript XML의 약자로 말그대로 JavaScript에 XML을 확장한 문법이다.

JSX는 React에 사용되는 문법이며 JavaScript의 공식적인 문접은 아니다.

JSX의 한 예인 React를 처음 구성했을 때 App.js코드를 보면 아래와 같다.

React App.js 기본 코드

이 친구.. 뭔가 익숙하다.

뭔가 JavaScript같아보이면서도 HTML 태그들이 들어있다.

JavaScript에서 HTML을 작성하듯이 비슷하게 작성할 수 있으며 가독성이 높다는 것이 JSX의 장점이라고 할 수 있다.

하지만 자세하게 보면 JSX 문법들에 대한 규칙이 있는데, 처음 접근할 때는 조금씩 달라서 까다롭기도하다.

---

JSX 문법

위에서 단점으로 설명 했듯이 JSX 문법 JavaScript와 HTML과 다른 규칙들이 몇가지 있다.

아래에 순서대로 살펴보자

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

오류 케이스

function App() {
    return(
    	<div>test1</div>
        <div>test2</div>
    );
}

올바른 케이스

function App() {
    return (
    	<div>
            <div>test1</div>
            <div>test2</div>
        </div>
    );
}

2. JSX 안에서 {}를 사용하여 JavaScript의 표현식을 넣을 수 있다

function App() {
    const value = "Hello";
    return (
        <div>
            <div>test1</div>
            <div>{value}</div>
        </div>
    );
}

3. 카멜표기법(CamelCase)을 사용한다.

function App() {
    const style = {
        backgroundColor : 'black',
        fontSize : '12px'
    }
    return (
        <div style={style}>test</div>
    );
}

4. class명을 className이라고 표기해야한다.

function App() {
    return (
        <div className="testClassName">test</div>
    );
}​

5. /* */ 을 이용하여 주석처리를 한다.

function App() {
    return (
        /*주석 테스트*/
        <div>test</div>
    );
}