JSX란?

JSX란?
자바스크립트의 확장 문법이며 XML과 매우 유사하다. 

  우선 JSX는 브라우저에서 실행되기 전 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 변환된다. 

다음 예제를 살펴보자. 

JSX

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


변환

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

 

이 처럼 JSX를 통해서 우리는 JavaScript로 작성해야 하는 코드들을 간략하고 시각적으로도 보기 좋게 표현할 수 있다. 한 마디로 JSX는 보기 쉽고 우리에게 익숙한 형태로 작성된다. 또한 JSX 문법을 활용하면 컴포넌트를 마치 HTML 태그를 사용하듯이 사용할 수 있다.

 

(JSX)
import TestComponent from "./TestComponent"

const App = () => {
	return (
    <>
    	<TestComponent />
    </>
    )
}

 

JSX의 문법에 대해 알아보자

1. return 문에는 하나의 부모 요소만 존재해야 한다.

 

다음 예제를 살펴보자.

function App() {
  return (
  	<h1>제목</h1>
  	<div>
    	Hello <b>react</b>
    	</div>
  )
}

export default App;

 

  위의 태그를 살펴보면 h1태그와 div태그가 같은 레벨에 위치한다. 웹 브라우저나 개발 서버를 실행했던 터미널을 통해 확인해 보면 

Failed to compile이라는 문구와 함께 오류가 발생하는 것을 확인할 수 있다. 그렇다면 하나의 부모 태그로 감싸주어야 한다.

<div>태그를 활용할 수 있고 React 모듈에 들어 있는 Fragment를 통해 감싸줄 수 있다. 

 

import React from 'react';
const { Fragment } = React;

function App() {
  return (
    <Fragment>
      <h1>제목</h1>
      <div>
      Hello <b>react</b>
      </div>
    </Fragment> 
  )
}

export default App;

참고로 Flagment태그는 <></>로 간략하게 표현이 가능하다!

 

2. 자바스크립트 표현

  JSX는 안에서 자바스크립트 표현식을 사용할 수 있다. JSX 내부에서 코드를 { }로 감싸면 된다. 주의해야 할 점은 자바스크립트의 모든 문법이 아니라 표현식, 즉 값으로 평가될 수 있는 문이어야 한다는 점이다.

 

import React from 'react';
const { Fragment } = React;

function App() {
const hello = 'world'

  return (
    <Fragment>
        <h1>{hello}</h1>
        <div>
        Hello <b>react</b>
        </div>
    </Fragment> 
  )
}

export default App;

 

3. If 문 대신 삼항 조건 연산자를 사용해라

  앞서 말했듯이 { } 내부에는 자바스크립트 표현식을 사용해야 한다. 그러므로 { } 내부에서 조건식이 필요한 경우에는 삼항 조건 연산자를 활용할 수 있다.

 

import React from "react";
const { Fragment } = React;

function App() {
  const hello = "world";

  return (
    <Fragment>
      {hello === "world" ? <h1>{hello}</h1> : null}
      <div>
        Hello <b>react</b>
      </div>
    </Fragment>
  );
}

export default App;

 

4. 논리곱 연산자와 논리합 연사자 조건부 렌더링

  삼항 조건 연산자를 활용하는 것 처럼 &&와 ||를 활용해서 조건부 렌더링을 할 수도 있다.

 

import React from "react";
const { Fragment } = React;

function App() {
  const hello = "world";

  return (
    <Fragment>
      {hello === "world" && <h1>{hello}</h1>}
      <div>
        Hello <b>react</b>
      </div>
    </Fragment>
  );
}

export default App;

 

5. 인라인 스타일링

  리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다. background-color처럼 -문자가 포함되는 이름이 있는데 이런 경우에는 카멜 표기법으로 작성해야 한다. 다시 작성해 보면 backgroundColor로 작성해야 한다.

 

function App() {
  const hello = "world";
  const style = {
    backgroundColor: "black"
  }
  return <div style={ style }>{ name }</div>
}

export default App;

 

6. class 대신 className

  일반 HTML에서 CSS 클래스를 사용할 때는 <div class="hello"></div>와 같이 작성하면 되었지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다. <div className="hello"></div>

 

7. 하나의 태그로 작성하는 태그의 경우에는 꼭 닫아 주어야 한다

  일반 HTML에서 <input>이라고 작성해도 작동하는데 아무 지장이 없지만 <input />로 꼭 닫아주어야 한다. 이를 self-closing 태그라고 부른다.