[React 시작하기] JSX

JSX란

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

이는 코드가 브라우저에서 실행되기 전에 코드 번들링 되는 과정(묶이는 과정)에서 바벨 컴파일러로 일반 자바스크립트 형태의 코드로 변환된다.

 

다음은 JSX 코드가 일반 Jascript 코드로 변환되는 과정이다.

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

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

 

문법

- 반드시 요소 여러 개가 부모 요소 하나에 의해 감싸져 있어야 한다. <div>로 감싸기싫은 경우 <Fragment>나 <>로 감싸줘도 된다.

이는 가상돔에서 컴포넌트 변화를 감지해 낼 때의 비교를 위해 트리 구조로 이루어져야한다. 

import React, { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>리액트</h1>
      <h2>첫 프로젝트</h2>
    </Fragment>
  );
}

export default App;

 

- 자바스크립트 표현식을 작성하려면 JSX 내부에서 {}로 감싸면 된다.

import React, { Fragment } from "react";

function App() {
  const react = "리액트";
  const project = "프로젝트";
  return (
    <Fragment>
      <h1>{react}</h1>
      <h2>첫 {project}</h2>
    </Fragment>
  );
}

export default App;

 

- 조건부 렌더링

삼항 연산자를 사용하여 조건을 만족할 때만 h1 태그를 렌더링 한다.

import React, { Fragment } from "react";

function App() {
  const framework = "리액트";
  return (
    <Fragment>
      {framework === "리액트" ? <h1>리액트 씁니다.</h1> : null}
    </Fragment>
  );
}

export default App;

 

추가로 && 연산자를 이용하면 더 짧은 코드로 작업을 할 수 있다.

import React, { Fragment } from "react";

function App() {
  const framework = "리액트";
  return (
    <Fragment>{framework === "리액트" && <h1>리액트 씁니다.</h1>}</Fragment>
  );
}

export default App;

 

- undefined 렌더링 하지 않게 하기

or 연산자를 사용하면 오류 방지할 수 있다.

import React, { Fragment } from "react";

function App() {
  const framework = undefined;
  return (
    <Fragment>{framework || <h1>리액트 씁니다.</h1>}</Fragment>
  );
}

export default App;

JSX 외부에서는 사용가능하다.

 

falsy 값 렌더링 관련 정리

false, null : 렌더링은 되나 아무것도 보여주지 않음

0 : 렌더링 하며 숫자 0을 보여준다.

undefined : 렌더링하는 상황을 만들면 안된다. 오류남. 

 

- 스타일링

DOM 요소에 스타일 적용시 객체 형태로 넣어줘야하며, 카멜 표기법으로 작성해야 한다.

import React from "react";

function App() {
  const framework = 리액트;
  const style = {
    color: "yellow",
    backgroundColor: "black",
  };
  return <div style={style}>{framework}</div>;
}

export default App;

 

- className 사용

초기 App.js에서 볼 수 있듯이 dom 요소에 html 에서 처럼 class가 아니라 className 을 설정해야 한다.

 

- 태그는 닫아야 함

html에서 <input> 태그 처럼 닫지 않아도 되는 태그가 있었는데 이처럼 사용하게 되면 오류가 발생한다. 

self-closing 태그를 사용해도 된다.

 

- 주석

{/*   */} 형식으로 작성한다.

태그를 여러 줄로 작성하게 된다면 시작 태그에 // 를 사용하여 주석을 작성할 수 있다.

function App() {
  return (
    <div className="App">
      {/*주석 작성 가능*/}
      <header className="App-header">
        <a
          // 주석 작성 가능
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;