[React] JSX

JSX가 뭐죠?

 JSX는 자바스크립트의 확장 문법이다. 브라우저에서 실행하기 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX는 자바스크립트의 공식적인 문법이라고 할 순 없다.

 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이자, 사용하는 이유다.

번들링 - “어떤 것들을 묶는다”라는 뜻으로 기능별로 모듈화한 JS 파일들을 묶어주는 것
→ 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아줌

바벨 - 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴
→ ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 작동할 수 있또록 호환성을 지켜줌
→ 바벨 : 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러 역할을 하는 툴

크로스 브라우징 - 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화하는 작업

JSX 문법 1. class 넣을 땐 className

 리액트는 app.js에서 html을 입력하는데, 자바스크립트 안에서 class는 프로그래밍 클래스를 선언한다는 뜻이다. 그래서 html, css의 class와 겹칠 수 있다. 그러므로 html, css의 class를 className으로 대체한다.

import logo from './logo.svg';
import './App.css';   // css파일 임포트

function App() {
  return (
    <div className="App"> // html class 대신 className
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
    </div>
  );
}

export default App;

JSX 문법 2. 변수넣을 떈 {중괄호}

 프론트에서 맨날 하는 일이 서버에서 데이터가져와서 html 사이에 넣어주는 것이고 이를 ‘데이터바인딩’이라 합니다. 결국 *중괄호로 *변수넣는 게 데이터바인딩입니다.

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

function App() {

  // post 변수가 서버에서 가져온 데이터라고 가정
  let post = '블로그 글 제목';

  return (
    <div className="App"> 
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );
}

export default App;

 어디든 중괄호 넣어서 데이터 넣을 수 있습니다. 위 코드처럼 h4태그 내부에 넣을 수도 있고, id나 className 뒤에 넣어서 서버에서 가져온 데이터로 id 바꿀수도 있습니다.

JSX 문법 3. style 넣을 떈 style={{스타일명:’값’}}

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

function App() {

  // post 변수가 서버에서 가져온 데이터라고 가정
  let post = '블로그 글 제목';

  return (
    <div className="App"> 
      <div className="black-nav">
        <h4 style={{color:'red', fontSize:'16px'}}>블로그</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );
}

export default App;

 css파일 사용 안하고 jsx에서 직접 style 적용할 땐 기존 html과 문법이 조금 다르다. 위 코드의 h4태그 style 부분을 보자. html에선 font-size 였다. 그런데 jsx에선 자바스크립트 파일이므로 -를 마이너스 연산자로 인식하여 font-size는 쓸 수 없다. 그래서 camelCase 형태로 css를 작성해야 한다.

 하지만 App.css에서 import하여 셀렉터로 css 적용할 땐 css파일을 가져오는 것이므로 기존 바식 그대로 font-size를 쓰면 된다.