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개만 됨)