[React] JSX

JSX (JavaScript XML)

• 자바스크립트에 XML을 추가한 확장 문법
• Javascript의 공식적인 문법이라고 할 수는 없다.
• 브라우저에서 실행 전에 코드가 번들링되는 과정에서 바벨을 사용하여  자바스크립트 형태의 코드로 변환.
• Javascript에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 장점이자 사용하는 이유

---

React에서의 JSX

• React.ceateElement()의 호출을 통해 일반 자바스크립트 객체인 'React 엘리먼트'로 컴파일 됨
• Babel은 JSX를 React.createElement() 호출로 컴파일 함
  
  

// 아래 두 코드는 동일
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

---

 JSX 특징

• 컴포넌트에 여러 요소가 있을 경우 반드시 부모요소가 하나는 감싸야 함, v16이상 부터는 div를 대신하여  fragment 기능을 import 해 대체  가능 
• 자바스크립트의 값을 JSX안엣서 렌더링 시에는 { }를 감싸서 렌더링 가능.
• 가독성이 높고 HTML 태그 사용으로 활용도가 높음

function App(){
const name = 'Na'
	return (
    	<>
        <h1>{name}</h1>
        </>
    )

}

• undefined를  렌더링 하지 않아야 함 (단, JSX 내부에서는 undefined 사용 가능)
• inline style 선언:  하이픈(-) → CamelCase 사용
• class명 선언:  class → className 사용
• 반드시 닫는 태그 사용 :   <input></input> , <input/> ,  <br/>
• 주석표기:  {/*  ...*/}

---

 

JSX 문법

1. 삼항연산자

• JSX 내부에서 IF문 사용이 불가하므로 삼항연산자 사용

// [App.js]

function App() {
  // App 컴포넌트 생성
  const name = 'John';
  return (
    <div className='App'>
      {name === 'John' ? <h1>true</h1> : <h1>false</h1>}
    </div>
  );
}

export default App;

 

2. AND 연산자 

• 특정 조건에 만족할 때만 내용을 보여주고, 아닌 경우 내용을 보여주지 않는 조건에  AND연산자 (&&)를 활용
• 단,   0은 예외적으로 화면에 표시 됨

// [App.js]

function App() {
  // App 컴포넌트 생성
  const name = 'John';
  return (
    <div className='App'>
      {name==='John' && <h1>true</h1>}
    </div>
  );
}

export default App;