[React] JSX (Javascript XML)

📌 JSX(Javascript XML)

: Javascript에 XML을 추가한 문법

개발자들이 과거 DOM 방식으로 html을 그리다보니 바로 납득이 안갔음 -> 그래서 만든 문법

보통 리액트에서만 사용 

html 문서 구조를 JS에서도 사용이 가능함 -> 따라서 JS 내부에서도 html을 짜듯 코드 구성이 가능해짐 

 

📍 기본 DOM 방식으로 html 그린 코드

function HelloWorldButton() {
  const [isClick, setClickState] = React.useState(false);
  const text = isClick ? "It's clicked" : "Hello, React world";
  
  return React.createElement(
    "button",
    { onClick: () => setClickState(!isClick) },
    React.createElement("div", null, React.createElement("span", null, text))
  );
}

const e = React.createElement;
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer);
root.render(e(HelloWorldButton));

 

📍 JSX로 짠 코드

// 함수형 컴포넌트
function HelloWorldButton() {
  const [isClick, setClickState] = React.useState(false);
  const text = isClick ? "It's clicked" : "Hello, React world";
  return (
    <button onClick={() => setClickState(!isClick)}>
      <div>
        <span>{text}</span>
      </div>
    </button>
  );
}
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer);
root.render(<HelloWorldButton />);

 

JSX 문법 1. html에 class 넣을 땐 className

JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하면 안됨 

그래서 class="" 넣고 싶으면 className이라고 써야함 

 

JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}

옛날 자바스크립트 문법 

document.getElementById().innerHTML = ??

리액트에서는 더 쉽게 데이터를 넣을 수 있음 

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

이렇게 중괄호안에 데이터바인딩하고 싶은 변수명만 담으면됨

 

참고, 변수에 있던걸 html에 꽂아넣는 작업 -> 데이터바인딩 이라고함

 

JSX 문법 3. html에 style속성 넣고싶으면 

<div style="color : blue"> 이런걸 넣고 싶으면

JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야함

예시)

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

{ 속성명: '속성값' } 이렇게 넣으면 됨

font-size 처럼 속성명에 대쉬기호 쓸 수 없음 

모든 단어를 붙여써야하며 붙여쓸 땐 앞글자를 대문자로 치환

 

하지만, JSX를 읽기 위해서는 bebel이라는 컴파일러(번역기) 필요

 

✅ Babel(구 six to five)

: JS의 컴파일러

예전에 ES6 가 나오고나서 몇몇 브라우저가 ES6를 지원하지 않아서,

ES6 문법과 ES5 문법의 충돌이 잦아서 ES6 문법을 ES5 문법으로 변환해 주던 기능을 하던 기능 

요즘은 ES6 는 브라우저 레벨에서 지원을 많이 하다보니, 다른 추가적인 언어들에 대한 컴파일러 역할함 -> 대표적으로 react