JSX(JavaScript XML)

👉 JSX(JavaScript XML)

Javascript에 XML을 추가한 확장 문법

리액트에서 사용되며 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환시켜 사용한다.

🤔 XML이란?

eXtensible Markup Language의 약자로 확장될 수 있는 표시 언어라는 뜻이다.
같은 Markup Language인 HTML과 비교해 보면 HTML은 이미 약속된 태그들만 사용이 가능하지만, XML은 사용자가 태그를 임의로 정의하여 사용 가능하다.

XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로 만들어 졌다.

👉 JSX 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

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

<div></div>, <Fragment></Fragment>, <></> 로 감싸줌

2. JSX 안에서의 자바스크립트 표현식

JSX 내부에서 { JS } 자바스크립트 표현식(JS)을 중괄호로 감싸 사용한다.

3. if문(for문) 대신 삼항 연산자(조건부 연산자), AND연산자(&&)사용

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크 립트 표현식에서는 사용할 수 없다.
따라서 삼항연산자(조건부 연산자와 AND 연산자(&&)를 조건부로 컴포넌트를 렌더링 시킨다.

● JSX 외부 -> if문

function App() { 
    let loginCheck = '';
    const login = 'Y';
     if(login === 'Y') {
         loginCheck = <div>GyungSubLee 입니다.</div>; 
     } else {
         loginCheck = <div>비회원 입니다.</div>; 
     } return ( 
         <> 
             {loginCheck }
         </>
      );
 }

● JSX 내부 -> 삼항연산자(조건부 연산자)

function App() {
    const login = 'Y'
    return (
         <>
             {loginYn === 'Y' ? ( 
                 <div>GyungSubLee 입니다.</div> 
              ) : ( 
                 <div>비회원 입니다.</div> 
              )}
         <>
    )
}

● JSX 내부 -> AND 연산자 (&&)

AND 연산자를 사용하여 더 짧은 코드로 구현 가능

function App() {
    const login = 'Y'
    return (
         <>
               {login === 'Y' && <div>GyungSubLee 입니다.</div>}
         <>
    )
}

● JSX 내부 -> 즉시실행함수 -> if문

function App() {
    const login = 'Y'
    return (
         <>
              {
                  (() => {
                      if(login === 'Y') {
                          return (<div>GyungSubLee 입니다.</div>);
                      } else { 
                          return (<div>비회원 입니다.</div>); 
                      } 
                  })()
              }
         <>
    )
}

---

참조)
https://goddaehee.tistory.com/296
https://developerntraveler.tistory.com/54