[react] JSX 문법 메모

JSX

일단기본적으로 리액트컴포넌트에서 JSX 문법을 리턴합니다.

// error
function App() {
  const name = undefined
  return name
}

// ok
function App() {
  const name = undefined;
  return <>{name || "react"}</>;
}

조건문

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할수 없습니다. -> 삼항 연산자 사용해야합니다.

import React from "react";

function App() {
  const name = "리액트";
  return (
    <>
      {name === "리액트" ? (
        <h1>리액트 입니다!</h1>
      ) : (
        <h2>리액트가 아닙니다 </h2>
      )}
    </>
  );
}

export default App;

 

이렇게 하면 됩니다. 리액트가 아닙니다 대신 아무것도 보여주지 않을려면 아래처럼 하면 됩니다.

null 대신 false 를 렌더링 해도 아무것도 안나옵니다. (0은 렌더됨)

import React from "react";

function App() {
  const name = "리액트2";
  return <>{name === "리액트" ? <h1>리액트 입니다!</h1> : null}</>;
}

export default App;

 

기타

return 다음 소괄호 있고 없고에 대한 글

 

인라인 스타일링(스타일객체를 적용)
꼭 닫아야하는 태그 : jsx에서는 태그를 받지 않으면 오류가 발생하는 태그가 있습니다. input
selft-closing 태그로 작성할수는 있습니다.