[스터디]리액트를 다루는 기술 – JSX

JSX란?

• 자바스크립트의 확장 문법이다.
• 실행되기 전에 실행가능한 자바스크립로 변환된다.
• 자바스크립트만 사용한 코드보다 가독성이 높고, 작성하기 쉽다.

// JSX 형태
function App() {
  return (
    <div>
        Hello <b>react</b>
    </div>
  );
}

// 이렇게 변환됨
function App() {
    return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

// 웹브라우저에서 실제 소스보기 하면 이렇게 보임
function App() {
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 5
    },
    __self: this
  }, "Hello ", react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    },
    __self: this
  }, "react"));
}

JSX문법

1. 반드시 최종 부모 요소(element)는 1개여야 한다.

import React from "react";

// 에러(최종 부모요소가 2개라서 에러발생)
function App() {
  return (
        <h1>리액트!!</h1>
        <h2>넌 누구냐??</h2>
  );
}

export default App;

import React from "react";

// 1개의 최종 부모 요소로 감싸줘야 한다.
function App() {
  return (
    <div>
        <h1>리액트!!</h1>
        <h2>넌 누구냐??</h2>
    </div>
  );
}

export default App;

2. 자바스크립트 표현을 쓸 수 있다.

function App() {
    const name = "리액트";
    return (
        <div>
            <h1>{name}!!</h1>
            <h2>넌 누구냐??</h2>
        </div>
    );
}

3. If문 대신 조건부 연산자를 쓴다.

// name이 "리액트"인 경우 "리액트!!!"를 출력, 그렇지 않은 경우 "리액트가 아님!!"을 출력한다.
function App() {
  const name = "리액트";
  return (
    <div>
      {name === "리액트" ? <h1>리액트!!!</h1> : <h2>리액트가 아님!!</h2>}
    </div>
  );
}

// name이 "리액트"인 경우 "리액트!!!"를 출력, 그렇지 않은 경우 아무것도 출력하지 않는다.
function App() {
  const name = '액트';
  return <div>{name === '리액트' && <h1>리액트!!!</h1>}</div>;
}

4. undefined를 return(렌더링)하면 안된다.

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

// name이 존재하면 출력, 그렇지 않으면 "값이 undefined입니다."를 출력한다.
function App() {
  const name = undefined;
  return name || '값이 undefined입니다.';
}

export default App;

5. 인라인 스타일 사용 시 카멜 표기법을 써야한다.

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

// background-color => backgroundColor 처럼 단어 구분자 없이쓰고, 첫 단어는 소문자 두 번째 단어의 첫 글자는 대문자로 쓴다(카멜 표기법)
function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',  // font-size -> fontSize
    fontWeight: 'bold',  // font-weight -> fontWeight
    padding: 16
  };

  return <div style={style}>{name}</div>; 
}

export default App;

6. class 대신 ClassName을 쓴다.

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

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

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

export default App;

7. html태그는 꼭 닫아야 한다.

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

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      {/* <input> 처럼 태그를 닫지 않으면 에러가 발생한다. */}
      <input />
    </>
  );
}

export default App;

8. 주석 사용법

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

function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 사용한다. */}
      <div
        className="react" // 시작태그를 여러줄로 작성하는 경우에는 이렇게 주석을 넣을 수 있다.
      >
        {name}
      </div>
      // 이런 주석은 코드가 그냥 보인다.
      /* 이런 주석도 오류다. 코드가 그냥 보인다. */
      <input />
    </>
  );
}

export default App;