[React.js] JSX(JavaScript XML)

JSX란?

• Javascript에 XML을 추가한 확장 문법이다.(그래서 HTML이 아니라 자바스크립트를 기반으로 함)
• React 개발 시 사용
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

바벨은 뭐냐?

ES6를 ES5로 변환. 즉, 오래된 브라우저에서도 ES6문법을 사용한 코드가 적용되게 만들어준다.
React에선 JSX를 브라우저가 읽기 쉬운 ES5 코드로 변환해준다.

JSX 문법 1. className

html 코드를 짤때

<div class="name">
  
</div>

이런식으로 class를 짜는게 익숙할 것이다.
하지만 JSX는 서두에 말했듯, html이 아닌 JS이므로 JS의 예약어인 class를 사용하면 그 class가 그 class가 아닌 상황이 발생하게 되는것이다. 따라서 구분되게 className을 사용하여 태그에 클래스명을 부여한다.

<div className="name">
  
</div>

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

데이터 바인딩이다.

vanila js를 쓸 땐, 변수를 바인딩하려면
document.getElementById().innerHTML = ?? 이런식으로 태그의 아이디나 클래스명을 js로 가져와서 동적인 행동을 취해야 했다.

하지만 리액트에선 JSX문법을 통해 더 쉽게 바인딩이 가능하다.

function App(){

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

이런식으로 변수를 바인딩해서 변수와 html을 연결할 수 있다.
href, id, className, src 등 여러가지 html 속성들에도 가능하다.

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

보통은 css파일을 따로두고 가져와 사용하는 import 방식이 주류이지만
가끔 html 태그 자체에 style속성을 주는 inline 방식도 사용한다.
물론 inline방식은 코드 길이면에서나 가독성 면에서나 그리 추천되는 방식은 아니지만
어쨌든 쓸 날이 있을거다.
JSX에선 style 속성을 쓸 때, 자료형으로 집어넣어야 한다.

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

요로코롬 말이다.
그리고 font-size처럼 속성명에 대쉬기호(-)를 쓸 수 없다
그래서 모든 대쉬기호를 카멜표기법으로 대문자로 치환하여 사용하면 된다.