JSX(JavaScript XML)

react.js 를 공부하면서 알고 넘어가야할 JSX의 간단한 사용법을 정리하는 글이다.

react에서는 공통적으로 재사용해야하는 요소들을  컴포넌트별로 분할해서 사용하게 되는데 이 컴포넌트를 만들때 유용하게 사용되는 문법이 JSX이다. 

 

✔︎JSX를 사용하는 이유

JSX를 사용하지 않고 React에서 위 화면처럼 hello world! 를 표출하기 위해서는 

const hello = React.createElement("div", { className: "App"}
            , React.createElement("h1", null, "hello world!"));

ReactDom.render(hello, document.getElementById('root'));

React.createElement 로 컴포넌트를 만들어서 ReactDom.render로 렌더링을 하여 화면에 그려주면 되지만 위와 같은 방식은 컴포넌트내에 화면에 표출시켜야하는 element가 여러개라면 그때마다 createElement로 만들어주어야 하기에 불편할 것이다.

 

const hello = <div className="App"><h1>hello world!</h1></div>;

// 위 코드를 Babel에서 컴파일하여 아래코드로 변환
const hello = React.createElement("div", { className: "App"}
            , React.createElement("h1", null, "hello world!"));

JSX를 사용하게 되면 위 코드를 Babel에서(최신 자바스크립트 문법을 이전버전의 자바스크립트 엔진을 사용하는 브라우저에서도 호환이 되도록 자바스크립트 코드를 변환해주는 컴파일러) 읽어서 자동으로 컴파일을 해주기 때문에 element가 늘어나도 createElement를 게속 만들어줄 필요가 없다. 위 예시를 보면 HTML 태그 <h1> 을 자바스크립트 변수 hello 에 대입한 것처럼 보여지는데 실제로 JSX는 자바스크립트를 확장한 문법이다. 한가지 주의할 점은 JSX문법 사용시 반드시 최상위에 부모태그로 감싸줘야 한다.

 

 

✔︎ JSX 사용예시

JSX를 활용하여 컴포넌트를 생성하면 react에서 아래와 같이 사용이 가능하다.

함수형 컴포넌트 작성

import 및 렌더링

표출 결과

위 예시는 함수형 컴포넌트 MyHeader를 생성, App.js에서 import 및 렌더링하여 사용한 예시이다.(App.js는 npm start시 index.js에서 root태그 아래에 렌더링하여 사용하는 컴포넌트) 

이런식으로 JSX를 활용하여 컴포넌트별로 분할하고 공통된 요소들을 보다 편리하게 수정 및 재사용이 가능하다. 

 

JSX에서 {} 안에 표현식을 넣어서 사용도 가능하다. 

function App() {
  
  const style = {
    App: {
      backgroundColor: "yellow"
    },
    h2: {
      color:"red"
    },
    bold_text: {
      color:"green"
    }
  }

  let name = "react"

  const func = () => {
    return "funcResult";
  }

  const number = 5;

  return (
      <div className="App" style={style.App}> 
          <h2 style={style.h2}>Hi, {name}</h2> // react
          <span>{"함수결과값:" + func()}</span><br/> // funcResult
          <b id='bold_text' style={style.bold_text}>{number}는 : {number % 2 === 0 ? "짝수" : "홀수"}</b> // 홀수
      </div>
  );
}

기본적으로 jsx에서 {}를 사용하여 표출할 수 있는 값은 문자열과 숫자인데 위에서 "react"이라는 문자열을 담은 변수 name을 넣어서 문자열을 표출하거나,  style 객체의 프로퍼티를 넣어 css style 사용이 가능하다. 이 외에도  함수도 넣어줄 수 있기 때문에 코드를 실제로 실행시켜보면 func함수의 return 값인 "funcResult" 가 화면상에 정상적으로 표출되는 것을 확인할 수 있다. 그 아래의 <b>를 보면 number 변수의 값에 따라 짝수 또는 홀수를 표출 하게되는데 이런식으로 삼항연산자를 사용하면 조건에 따라 각각 다른 요소를 렌더링 할 수 있고 이를 조건부 렌더링이라고 한다.