[React] 2.JSX란?

JSX?

확장된 자바스크립트 문법으로 JS와 HTML을 함께 쓸 수 있다.

 

예시

function Header(){
    const number = 10

    return(
        <main>
            <h2>number is {number}</h2>
        </main>
    )
}

---

🔎 JSX의 특징

1. JSX 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다 

    → 숫자나 문자로 표현되는 표현식만 가능

2. 숫자, 문자열, 배열 값만 렌더링 된다

    → undefined, null, boolean(true,false)는 값이 생성되더라고 페이지에 렌더링이 되지 않는다.

3. 모든 태그는 닫혀있어야 한다

4. 차상위 태그는 반드시 하나여야 한다.

    → 차상위 값이 여러개인 경우 빈태그 <></>를 가장 위에 삽입한다.

---

출처
이정환 - 한 입 크기로 잘라먹는 리액트