JSX란 무엇일까?

JSX란❓❓

JSX란 JavaScript Extensions라 하여 JS상에서 기본 MarkUp문법을 사용 할 수 있게 해주는 확장된 JS 문법라고 보면 됩니다.
기본 JS 에서는 MarkUp문법은 잘못된 문법으로 인식하기에 문법 오류를 출력합니다.

JSX - 👉주의 사항!👈

1. 중괄호 내부는 자바스크립트 표현식만 사용 가능합니다.
2. 숫자, 문자열, 배열 값만 출력이 가능합니다.

const number = 10;
return(
    <main>
    {number} // 변수
    {number%2 == 0 ? "참" : "거짓"} // 삼항 연산자
    {[0,1,2,3,4]} // 배열
    </main>
    )

[위 처럼 변수, 삼항 연산자, 배열은 출력 할 수 있지만 Object, if문, for문 등 표현식이 아닌 것은 넣을 수 없다.]

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

const number = 10;
return(
    <main>
    <p>{number}</p>
    <img> // Error | 태그가 정상적으로 닫히지 않았기 때문에 오류가 발생합니다.
    </main>
    )

4. 최상위 태그는 반드시 하나여야만 합니다.

const number = 10;
return(
    <main>
    {number} // 변수
    {number%2 == 0 ? "참" : "거짓"} // 삼항 연산자
    {[0,1,2,3,4]} // 배열
    </main>
    // <div></div> Error | 최상위 태그는 오직 하나여야만 하기 때문
    )

• 만약 마땅한 최상위 태그를 찾지 못하면 공백으로 해도 괜찮습니다.
• 최상위 태그가 공백일 경우 root 아이디 밑에 그냥 흩뿌려지게 됩니다.

const number = 10;
return(
    <>
    {number} // 변수
    {number%2 == 0 ? "참" : "거짓"} // 삼항 연산자
    {[0,1,2,3,4]} // 배열
    </>
    )