2. JSX

2-2. JSX란?

---

JSX는 자바스크립트의 확장 문법이며 브라우저가 코드에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트로 변환된다

2-4. JSX 문법

---

감싸인 요소

---

컴포넌트는 반드시 하나의 부모로 이루어진 태그만 반환해야 한다

function Test(){
    return (
        <h1>Title</h1>
        <div>Contents</div>
    )
}

이런식의 JSX를 반환하는 컴포넌트는 에러를 발생시킨다

function Test(){
    return (
        <div>
            <h1>Title</h1>
            <div>Contents</div>
        </div>
    )
}

이렇게 의미 없이 div태그로 감싸는 것이 싫다면 Fragment라는 기능을 사용하면 된다(v16이상부터 사용가능)

function Test(){
    return (
        <Fragment>
            <h1>Title</h1>
            <div>Contents</div>
        </Fragment>
    )
}
//아래도 Fragment를 이용한 감싸기. 동일하게 작동한다
function Test(){
    return (
        <>
            <h1>Title</h1>
            <div>Contents</div>
        </>
    )
}

왜 하나의 태그로 감싸서 반환해야할까?

• Virtual DOM에서 컴포넌트의 변화를 감지해서 이전 DOM과 비교할 때 효율적으로 비교할 수 있도록 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문

자바스크립트 표현

---

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다 {}로 감싼 뒤 자바스크립트에서 코딩하듯 사용하면 된다

function Test(){
    const name = 'Title';
    return (
        <>
            <h1>{name}</h1>
            <div>Contents</div>
        </>
    )
}

그러나 if문은 사용할 수 없다

---

JSX 내부에서는 if 문은 사용할 수가 없다

조건에 따라 다른 내용을 렌더링해야 할 경우에는 JSX 밖에서 조건문을 만들어 작동하게 하거나 조건부 연산자를 사용하면 된다

function Test(){
    const name = 'title';
    return (
        <>
            {name==='Title' ? <h1>{name}</h1> : <h1>제목 없음</h1>}

            <div>Contents</div>
        </>
    );
}
// 제목 없음

// Contents

undefined 예외처리

---

리액트에서는 undefined는 렌더링 할 수 없다

function Test(){
    const value = undefined;
    return value;
}
// 에러 발생

에러가 발생할 수도 있는 값을 렌더링한다면 아래와 같이 예외처리를 해주자

function Test(){
    const value = undefined;
    return value || 'value is undefined';
}
// value is undefined

undefined 자체를 렌더링할 순 없지만 JSX내부에선 가능하다

function Test(){
    const value = undefined;
    return <>
        {value || 'value is undefined'}
    </>
}
// value is undefined