번들링과 바벨

JSX는 자바스크립트 확장 문법이다. XML과 비슷하게 생겼다.

HTML형식처럼 DOM구조로 이루어져있지만, JAX는 HTML이 아닌 JS다.
JSX에 작성한 코드는 웹브라우저에서 실행되기 전, 번들링 되는 과정에서 바벨을 사용해 일반 JS코드로 변환된다.

번들링 : 모듈들을 불러와 하나의 파일로 묶는다. 가장 유명한 번들러는 웹팩(WebPack)이다.
바벨 : ES6문법(JSX 등)으로 구성된 코드를 ES5로 변환한다. 웹브라우저 호환성을 높여준다.

코드 비교

• JSX 코드

function HelloWorld() {
  return (
    <div>
      Hi, <b>JSX</b>
    </div>
  );
}

• JS 코드

function HelloWorld() {
	return React.createElement("div", nullm "Hi, ", React.createElement("b", nullm "JSX"));
}

JSX는 자바스크립트 문법이 아니다. 온전히 리액트 프로젝트 개발을 위해 사용된다.

문법

부모 요소 하나로 감싸기

컴포넌트 마다 return하는 요소를 최상위 부모 요소 하나로 감싸야 한다.
그렇지 않을 경우에 에러가 발생한다.

에러 발생

funtion Helloworld() {
  return (
    <div>
      Hi, <b>JSX</b>
    </div>
    <div>
      Hi, <b>JavaScript</b>
    </div>
  );
}
export default Helloworld;

리액트 Virture DOM은 컴포넌트 변화를 감지할 때, 효율적으로 비교할 수 있다.
그 이유는 컴포넌트를 하나의 DOM트리 구조로 감싸고 비교하기 때문이다.

리액트 16버전 이상 부터 최상위 요소를 div가 아닌 Fragment라는 기능요소로 대체해 사용할 수 있다.

import { Fragment } form 'react';
funtion Helloworld() {
  return (
  	<Fragament>
      <div>
        Hi, <b>JSX</b>
      </div>
      <div>
        Hi, <b>JavaScript</b>
      </div>
    </Fragament>
  );
}
or
funtion Helloworld() {
  return (
  	<>	//생략가능
      <div>
        Hi, <b>JSX</b>
      </div>
      <div>
        Hi, <b>JavaScript</b>
      </div>
    </>
  );
}
export default Helloworld;

div 요소와 다르게 Fragment 요소는 프론트에 영향을 끼치지 않는다.

자바스크립트 표현식 사용 { }

JSX 내부에서 자바스크립트 표현식을 사용할 수 있다.

funtion Helloworld() {
  const name = '리액트~';
  return (
  	<>
      <div>
        Hi, <b>{name}</b>
      </div>
      <div>
        Hi, <b>JSX</b>
      </div>
    </>
  );
}
export default Helloworld;

JSX에서는 if를 사용할 수 없다.

JSX 내부의 자바스크립트 표현식에는 if를 사용할 수 없다.
조건부 연산자(삼항 연산자)를 사용해 if를 대신한다.

funtion Helloworld() {
  const name = '리액트~';
  return (
  	<>
      {name === '리액트~' ? (
      	<div>맞아 리액트야</div>
      ) : (
      	<div>리액트 아니야~</div>
      )}
    </>
  );
}
export default Helloworld;

특정 조건을 만족할 때만 내용을 보여주고 싶을 때는 AND연산자(&&)를 사용한다.

return (
		<>{name === '리액트~' && <div>맞아 리액트야</div>}</>
    );

CSS를 적용하는 방법

인라인 스타일링

JSX 내에서 인라인 style을 지정할 수 있다.

1) const로 지정하여 적용
function App() {
  const name = "리액트";
  const style = {
    backgroundColor: "black", //-가 사라지고 카멜 표기법으로 작성된다.
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: 16, //단위를 생략하면 자동으로 px로 지정된다.
  };
  return <div style={style}>{name}</div>;
}

2) 태그 내 직접 적용
function App() {
  const name = "리액트";
  return
  	<div style={{
          backgroundColor: "black", //-가 사라지고 카멜 표기법으로 작성된다.
          color: "aqua",
          fontSize: "48px",
          fontWeight: "bold",
          padding: 16, //단위를 생략하면 자동으로 px로 지정된다.
        }}>
    	{name}
	</div>;
}

class 대신 className

JSX에서는 html의 class 요소를 아닌 className으로 사용해야 한다.

//App.js
return <div className="react">{name}</div>;

//App.css
.react {
  background: black;
  color: aqua;
  font-size: 48px;
  font-weight: bold;
  padding: 16;
}

v16이상부터 className이 아닌 class를 사용해도 적용은 가능하나, 브라우저 consol에서 에러로 표기된다.
굳이 쓰지말라는거 쓰지 말자.

태그를 닫지 않으면 에러가 발생한다.

HTML과 다르게 JSX는 요소를 마무리하는 태그를 꼭 닫아야 한다.

//HTML
<input class="html">

//JSX
<input className="react"></input>
or
<input className="react"/>

태그를 닫지 않으면 에러가 발생한다.

주석

JSX의 주석은 { }(코드블럭) 내부에 /* */ 으로 주석을 처리한다.

{/*<input></input>*/}