[React] JSX

---

📝 JSX

JSX는 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼습니다.
JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

//JSX 코드
function App(){
    return(
      <h1>Hello</h1>
    );
}
export default App;

//바벨을 사용하여 자바스크립트 코드로 변환된 코드
function App(){
    return React.createElement("h1", null, "Hello");
}

컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 React.createElement 함수를 사용해야 하는 것은 매우 불편합니다.

📝 JSX의 장점

1. 보기 쉽고 익숙하다
위처럼 일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드만 봐도 가독성이 높고 작성하기 쉽다고 느껴집니다.

2. 활용도가 높다
JSX에서는 div나 span과 같은 HTML태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 JSX 안에서 작성할 수 있습니다.

📝 JSX 문법

1. 부모 요소 하나로 감싸야 함

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

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

//error case
function App() {
    return (
        <div>Hello</div>
        <div>Hi</div>
    );
}
export default App;

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생했습니다.

** 📜 해결 방법**

1. div 태그로 감싸는 방법이 있습니다.

2. 리액트 v16 이상부터 도입 된 Fragment라는 기능이 있습니다.

import { Fragment } from 'react';

function App() {
    return (
      <Fragment>
        <div>Hello</div>
        <div>Hi</div>
      </Fragment>
    );
}
export default App;

코드 상단 import 구문에서 react 모듈에 들어 있는 Fragment라는 컴포넌트를 추가로 불러옵니다.

3. 빈 태그를 사용합니다.

import { Fragment } from 'react';

function App() {
    return (
      <>
        <div>Hello</div>
        <div>Hi</div>
      </>
    );
}
export default App;

---

2. 자바스크립트 표현

JSX 안에서는 자바스크립트 표현을 쓸 수 있습니다.
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다.

function App(){
  const name = 'React';
  return(
    <>
      <div>Hello</div>
      <div>{name}</div>
    </>
  );
}
export default App;

---

3. if문 대신 조건부 연산자

JSX 내부에서는 if 문을 사용할 수 없습니다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 됩니다.
조건부 연산자의 다른 이름은 삼항 연산자입니다.

function App(){
  const name = 'React';
  return(
    <>
      {name === 'React' ? (
        <div>True</div>
       ):(
           <div>False</div>
         )}
    </>
  );
}
export default App;

---

4. AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고 만족하지 않을 때는 아무것도 렌더링하지 않아야 할 때도 조건부 렌더링을 할 수 있습니다.

function App(){
  const name = 'React';
  return <div>{name === 'React' && <h1>True</h1>}</div>;
}
export default App;

---

5. class 대신 className

일반 HTML에서는 class를 사용하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 합니다.

function App(){
  const name = 'React';
  return <div className="react">{name === 'React' && <h1>True</h1>}</div>;
}
export default App;

---