JSX란?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 

[JSX]

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

이렇게 작성된 코드는 다음과 같이 변환됩니다.

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

만약 컴포넌트를 렌드링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편하겠지요? JSX를 사용하면 매우 편하게 UI를 렌더링 할 수 있습니다.

 

<<JSX의 장점>>

1. 보기 쉽게 익숙하다

2. 더 높은 활용도

 

<<JSX 문법>>

1. 감싸인 요소

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

[src/App.js]

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div>
  );
}

결과가 잘 출력된다.

리액트 v16이상 부터 도입된 Fragment라는 기능을 사용하면 됩니다.

import { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}
export default App;

코드 상단 import 구문에서 react 모듈에 들어 있는 fragement라는 컴포넌트를 추가로 불러옵니다. fragment는 다음과 같은 형태로도 표현할 수 있습니다.

function App() {
  return (
    <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
export default App;

브라우저에서 결과물이 잘 나타난다.

 

<<자바스크립트 표현>>

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

function App() {
  const name = "리액트";
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
export default App;

오류 없이 같은 화면이 나타난다.

 

<<IF문 대신 조건부 연산자>>

[src/App.js]

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

이렇게 코드를 작성한 후 저장하면 브라우저에서 '리액트입니다.'라는 문구를 볼 수 있습니다.

하지만 name 값을 다음과 같이 다른 값으로 바꾸면,

const name = '리왝트';

'리액트가 아닙니다'라는 문구가 나타날 것입니다.

 

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

[src/App.js]

function App() {
  const name = "리왝트";
  return <div>{name === "리액트" ? <h1>리액트입니다.</h1> : null}</div>;
}
export default App;

위 코드와 같이 null을 렌더링하면 아무것도 보여 주지 않습니다.

[src/App.js]

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

이렇게 코드를 작성하고 나면 브라우저에 아무것도 나타나지 않을 것 입니다.

 

function App() {
  const number = 0;
  return <div>{number && <h1>리액트입니다.</h1>}</div>;
}
export default App;

falsy한 값 0 은 예외적으로 화면에 나타난다는 것입니다.

 

<<JSX는 언제 괄호로 감싸야 하나요?>>

JSX를 작성할 때 (<div>Hello World <div>)와 같이 괄호로 감쌀 때도 있고, 감싸지 않을 때도 있습니다. 주로 JSX를 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 감싸지 않습니다. JSX를 괄호로 감싸는 것은 필수 사항이 아닙니다. 감싸도 되고 감싸지 않아도 됩니다.

 

<<undefined를 렌더링하지 않기>>

name 값이 undefined일 때 보여 주고 싶은 문구가 있다면 다음과 같이 코드르 작성하면 됩니다.

[src/App.js]

import "./App.css";

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

<<인라인 스타일링>>

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있는데요. 이러한 이름은 - 문자를 없애고 카멜 표기법으로 작성해야 합니다. 따라서 background-color는 backgroundColor로 작성합니다.

[src/App.js]

function App() {
  const name = "리액트";
  const style = {
    //background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
    backgroundColor: "black",
    color: "aqua",
    fonstSize: "48px", //font-size ->fontSize
    fontWeight: "bold", //font-weight ->fontWeight
    padding: 16, //단위를 생략하면 px로 지정됩니다.
  };
  return <div style={style}>{name}</div>;
}
export default App;

지금은 style 객체를 미리 선언하고 div의 style 값으로 지정해 주었는데요. 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성하면 됩니다.

[src/App.js]

function App() {
  const name = "리액트";
  return (
    <div
      style={{
        //background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
        backgroundColor: "black",
        color: "aqua",
        fonstSize: "48px", //font-size ->fontSize
        fontWeight: "bold", //font-weight ->fontWeight
        padding: 16, //단위를 생략하면 px로 지정됩니다.
      }}
    >
      {name}
    </div>
  );
}
export default App;

 

<<class 대신 className>>

JSX에서는 class가 아닌 className으로 설정해 주어야 합니다.

[src/App.css]

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

 App.js 파일에서 상단에 App.css를 불러온 뒤 div 요소에 className 값을 지정해 주세요.

[src/App.js]

import "./App.css";

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

export default App;

<<꼭 닫아야 하는 태그>>

태그 사이에 별도의 내용이 들어가지 않는 경우에는 다음과 같이 작성할 수도 있습니다. 이러한 태그를 self-closing 태그라고 부릅니다. 태그를 선언하면서 동시에 닫을 수 있는 태그

[src/App.js]

import "./App.css";

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

export default App;

<<주석>>

[src/App.js]

import "./App.css";

function App() {
  const name = "리액트";
  return (
    <>
      {/* 주석은 이렇게 작성합니다. */}
      <div
        className="react" //시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있습니다.
      >
        {name}
      </div>
      // 하지만 이런 주석이나 /* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
      <input />
    </>
  );
}

export default App;