JSX

JSX

JSX는 JavaScript Xml 을 의미한다.

결국 HTML은 XML이라고 할 수 있기 때문이다.

그래서 JS 안에 HTML 을 갖고 있는 형태를 띄는 것이다.

 

하지만 코드는 이렇지만 실제로는 우리가 보는 화면 뒷단에서 변환과정을 거친다.

좀 더 브라우저 친화적인 코드로 변환시킨다.

 

이 변환된 코드를 크롬의 개발자도구의 Source 탭에서 확인할 수 있다.

 

const element = <h1>Hello, world!</h1>;

위의 코드는 JSX의 한 예시이다.

 

리액트의 생김새를 정의할 때 사용하는 문법이라고 생각하면 된다.

보통 리액트에서 UI 디자인 시에 같이 많이 쓰인다.

 

또다른 예시를 보자.

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;

위 코드는 단순히 페이지에 "Let's get started!"를 보여주는 단순한 코드이다.

 

하지만 위에서 말했다시피 변환과정을 거치면 위 코드와는 다르게 된다.

function App() {
  return /*#__PURE__*/(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("div", {
    children: /*#__PURE__*/(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("h2", {
      children: "Let's get started!"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 4,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 3,
    columnNumber: 5
  }, this);
}

 

Source의 bundle.js에서 App()을 확인하게 되면 위와 같은 코드를 볼 수 있다.

우리가 작성한 코드 이외에 이렇게 복잡한 코드가 있는 이유는 전체 react 라이브러리 소스 코드도 같이 있기 때문이다.

뿐만 아니라 전체 react-dom 라이브러리 소스 코드도 포함한다.

한마디로 전체 리액트 패키지 코드이다.

 

리액트 컴포넌트 파일에서 JSX 문법을 사용하면 Babel이 Javascript 문법으로 바꿔준다.

 

그럼 여기서 Babel은 무엇일까?

한마디로 말하면 '자바스크립트 컴파일러' 이다.

현재 웹 프론트엔드 기술들은 빠르게 변화하고 확장되어 가고 있다.

 

하지만 분명 아직도 오래된 기술을 사용하고 있는 웹 페이지들도 있다.

 

Babel은 최신 문법이나, 아직 정식으로 인정받지 않은 스킬을 사용하는 경우에도

Javascript로 변환해주어 정상적인 실행이 가능하도록 해준다.

한마디로 호환성을 유지해주기 위해서 사용한다.

 

 

JSX 문법

className

Javascript 파일에서 HTML 태그를 그대로 쓴다고 하지만, 

HTML에서의 태그에 class를 선언하는 것 처럼 사용하게 되면 안된다.

 

Javascript엔 이미 class라는 문법이 존재하기 때문이다.

따라서 HTML의 class와 JSX의 className이 같은 문법이라고 보면 된다.

 

CSS 사용

만약 css파일을 사용하고 싶다면 import 'css파일 경로'로 입력해주면 된다.

 

변수 넣기

만약 태그 중간에 변수를 넣고싶다면, 중괄호 안에 넣어주면 된다.

이것을 '데이터바인딩'이라고 한다.

(서버에서 데이터를 가져와 html 사이에 넣어줌)

 

태그에 style 넣기

<h4 style={{color: 'red'}}>Blog</h4>
// style={{스타일명: '값'}}

style을 넣을땐 쌍 따옴표를 사용하면 안되고, 위와 같이 object 형식으로 넣어주어야 한다.

한가지 주의할 점은 font-size와 같은 스타일명은 Javascript에선 '-'가 minus로 인식이 되기 때문에,

camelCase로 fontSize와 같이 작성해주어야 한다.

 

 

전체 예시 코드

import logo from './logo.svg';
import './App.css';

function App() {
  let post = '맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color: 'red'}}>Blog</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

export default App;