JSX 문법 정리

1.import React from 'react';
import 구문으로 모듈 불러오기 : 프로젝트 생성과정에서 node_modules 생성 그중 react 모듈 불러오기
(비교: require /node js)
사실 모듈을 불러와 사용하는 것은 브라우저가 아닌 환경에서 사용할 수 있도록 node js에서 지원하는 기능,
이 떄문에 bundler(webpack, parcel,browserify ) 사용한다.
보통 웹팩의 loader를 많이 사용하나 create-react-app이 이 작업을 포함한다

2.JSX
-사용이유 : 가독성이 편하다(공식적인 js 문법은 아니다.)
*ReactDom.render : 컴포넌트를 페이지에 렌더링, react-dom 모듈을 불러와 사용

2-1. JSX문법
 1)하나의 요소로 감싸주어야한다.(div 사용하고 싶지 않으면 Fragment 태그사용/v16이상) - 컴포넌트 내부는 dom tree 구조
 2)자바스크립트 표현식 {}로 감싸주어 표현한다
 3)if문 사용 불가 > 대신 {}안에 조건부 연산자 사용(삼항연산자)하거나 JSX 바깥에서 사용

삼항식이용

import React from "react";

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

export default App;

&&로 null 값 반환

import React from "react";

function App() {
  const name = "react";
  return <div>{name === "리액트" && <h1>리액트입니다</h1>}</div>;
}

export default App;

4)undefined 랜더링하지 않는다.

리액트 컴포넌트 함수에서 undefined 반환하여 렌더링하면x
JSX 내에서 랜더링은 가능하다. 이때 보여주고 싶은 문구는 이렇게 표기한다

import React from "react";

function App() {
  const name = undefined;
  return (
    <div>
      <h1>{name || "리액트"}</h1>
    </div>
  );
}

export default App;

5)인라인스타일링

카멜표기법으로작성하며 단위를 생략하면 px로 지정된다

import React from "react";

function App() {
  const name = "리액트";
  const style = {
    backgroundColor: "black",
    color: "white",
    fontSize: "30px",
    padding: 16,
  };
  return (
    <div>
      <h1 style={style}>{name}</h1>
    </div>
  );
}

export default App;

6) class 대신 className

class를 지정해도 적용이 되지만 v16이상부터는 개발자도구에서 경고창이 뜬다

import React from "react";
import "./App.css";

function App() {
  const name = "리액트";
  return (
    <div>
      <h1 className="react">{name}는 재밌어~!</h1>
    </div>
  );
}

export default App;

7)태그를 닫지 않으면 오류가 생긴다

import React from "react";
import "./App.css";

function App() {
  const name = "리액트";
  return (
    <div>
      <h1 className="react">{name}는 재밌!어</h1> <br />
      <input />
    </div>
  );
}

export default App;

8)주석은 {/**/}로 표기한다

function App() {
  const name = "리액트";
  return (
    <div>
      <h1 className="react">{name}는 재밌!어</h1> <br />
      <input />
      {/*주석은 이렇게 작성합니다 */}
      //이런주석들은 /*화면에 표시돼용 */
    </div>
  );
}

export default App;