[React] JSX 문법 3가지

JSX란?

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

function App() {
  return (
    <div className="App">

    </div>
  )
}

export default App;

App.js 이 우리의 메인 페이지다. App.js에 div 하나만 남기고 삭제해보자.

JS파일인데도 동작하는 이유는 HTML이 아니라 JSX이기 때문이다.
JSX란 JavaScript 안에서 HTML을 쉽게 작성할 수 있게 도와주는 부가기능 혹은 언어라고 생각하면 된다.
JSX를 사용하면 기존 HTML처럼 간단하게 레이아웃을 만들 수 있다.

JSX를 쓰는 이유는..
기존 문법으로 에서 <div></div>하나를 만들려면 아래와 같이 써야한다. (길다)

React.createElement('div', null, 'Hello World');

JSX문법 1. class는 className으로, import도 잊지말자

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

function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <h1>Blog</h1>
      </div>
    </div>
  )
}

export default App;

JSX는 일반 HTML과 차이점이 하나 존재하는데,
JSX안에서는 class 속성을 사용하면 안되고 꼭 className 속성을 사용해야 한다.

이유는 JSX를 작성하는 공간도 JavaScript를 사용하는 공간이고, JavaScript 안에는 class 문법이 이미 존재하기 때문이다.

또 CSS파일을 사용하기 위해서는 상단에 해당 CSS파일을 import 해야한다.

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

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

function App() {
  let post = '강남 우동 맛집';
  let logo = 'logo';
  let title = 'title';

  return (
    <div className="App">
      <div className="black-nav">
        <h1 id={ logo }>Blog</h1>
      </div>
      <h4 class={ title }>{ post }</h4>
    </div>
  )
}

export default App;

JSX안에서 변수 바인딩을 할때는 중괄호를 열고 변수명을 입력한다. {변수명}
변수에 있던 데이터를 html사이에 넣고싶으면 아무데서나 {중괄호}를 열어주면 된다!
id나 class등에도 {중괄호}문법 사용이 가능하다.

JSX내에 JavaScript 문법을 사용할때에도 {중괄호} 안에 쓴다.

기존 문법으로 변수를 바인딩하려면.. (길다)

document.querySelector("h4").innerHTML = post;

JSX문법 3. style={ {display:”block”} }

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

function App() {
  let post = '강남 우동 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h1 style={ { color:"red", fontSize:"14px" } }>Blog</h1>
      </div>
      <h4>{ post }</h4>
    </div>
  )
}

export default App;

HTML에 style을 inline으로 넣고 싶을 때는 중괄호를 열고, Object 자료형식으로 작성해준다.
스타일명의 - 는 카멜케이스 형식으로 변환하여 사용하고,
스타일 값은 문자열로 넣어준다.

몇가지 더..

1. JSX는 return ( ) 소괄호 안에다 작성해야 한다.
2. return ( ) 안에는 태그를 병렬로 사용할 수 없다. (부모박스 1개만 됨)