[React] JSX란?

1. JSX란?

---

• JavaScriptXML의 약어 : Javascript에 XML을 추가한 문법
• React프로젝트에서 Babel로 컴파일하여 사용(순수 자바스크립트로 변환)

2. JSX의 장점

---

1) 가독성 우수

// 1. JSX문법을 사용하지 않고 React.createElement로만 작성
ReactDOM.render(
    React.createElement(
        'div',
        null,
        React.createElement(
            'h1',
            null,
            '리스트'
        ),
        React.createElement(
            'ul',
            null,
            React.createElement(
                'li',
                null,
                '항목1'
            ),
            React.createElement(
                'li',
                null,
                '항목2'
            )
        )
    ),
    document.querySelector("#root")
)


//2. JSX 문법 사용
ReactDOM.render(
    <div>
        <h1>리스트</h1>
        <ul>
            <li>항목1</li>
            <li>항목2</li>
        </ul>
    </div>
	,
    document.querySelector("#root")
)

2) 바벨 컴파일 과정에서 오류를 인지하기 용이하다.

태그를 닫지 않았을 때도 바로 오류를 감지 할 수 있다.

3. JSX의 문법

---

1) 최상위 요소는 하나여야 함

요소가 2개일 경우 오류

1-1) 최상위 요소를 리턴할 때 소괄호로 감싸야함
    → 절대적인 문법은 아니지만 컴파일이 제대로 되지 않을 때 시도 해보기

 

2) 여러 요소를 리턴하고 싶을 때는 fragment 사용 (<></>)

fragment로 묶을 경우 에러 발생X

3) 자바스크립트 표현식은 { } 사용

 

4) 조건문은 삼항연산자 or &&을 사용

삼향연산자

&& 연산자

5) style을 인라인으로 표현가능

6) class 대신 className으로 표기