[리액트를 다루는 기술] 2장 JSX

JSX 란?

: 자바스크립트의 확장 문법

: 브러우저에서 실행되기 전에 번들링 되는 과정에서 바벨이 일반 자바스크립트 형태의 코드로 변환해준다.

JSX 예시

function App90 {
  return (
    <div>Hello react</div>
  );
}

JSX를 일반 js문법으로

function App() {
  return React.createElement("div", null, "Hello react");
}

JSX 장점

• JSX로 편하게 HTML을 작성할 수 있다.
• 가독성이 높다

📢규칙 - 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

function App90 {
  return (
    <div> // 만약 부모 요소가 없을 경우 에러가난다.
      <p>aaaaa</p>
      <p>bbbbb</p>
    </div>
  );
}

리액트 16버전 부터 도입된 Fragment 기능을 사용해서 div를 사용하지 않아도 된다.

import {Fragment} from 'react';

function App90 {
  return (
    <Fragment> // <> 로 표현해도 된다
      <p>aaaaa</p>
      <p>bbbbb</p>
    </Fragment>
  );
}

📢규칙 - 자바스크립트 표현식도 사용가능하다. { }로 감싸준다.

function App90 {
  const name = '리액트';
  
  return (
    <> 
      <p>{name} aaaaa</p>
      <p>bbbbb</p>
    </>
  );
}

📢규칙 - if문은 사용이 불가능하다.

대신 { }안에 조건부 연산자 (삼항 연산자)를 사용하면 된다.

function App90 {
  const name = '리액트';
  
  return (
    <> 
      {name == '리액트' ? (
        <h1>리액트</h1>
      ) : (
        <h2>리액트아님</h2>
      )}
    </>
  );
}

null을 렌더링하면 아무것도 보여주지 않는다.

function App90 {
  const name = '리액트';
  return <div>{name == '리액트' ? <h1>리액트</h1> : null}</div>;
}

더 간결하게 && 연산자 이용가능하다.

function App90 {
  const name = '리액트';
  return <div>{name == '리액트' && <h1>리액트</h1>}</div>;
}

📢규칙 - class 대신 className으로 설정해준다.

import './App.css';

function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}