[React] JSX

JSX(JavaScript XML) 이란?

: Javascript 에서 XML을 추가한 확장한 문법

• 리액트로 프로젝트를 개발할때 사용, 공식적인 자바스크립트 문법은 아님
• 브라우저에서 실행하기 전에 Babel 을 사용하여 일반 자바 스크립트 형태의코드로 변환 ex) https://bit.ly/2wMpkk2
• 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.

JSX 문법

** JSX가 JavaScript 로 제대로 변환이 되려면 지켜주어야하는 몇가지 규칙이 있다.

1. 태그는 항상 닫혀있어야한다.
ex) Self Closing 태그를 사용하여닫힌 태그 사용

function App() {
  return(
    <div>
      <Hello/>
      <Hello/>
      <Hello/>
      <input/>
      <br/>
    </div>
  );

2. 두개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야한다.

<잘못된 코드>

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <Hello />
    <div>안녕히계세요.</div>
  );
}
export default App;

<올바른 코드>

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}
export default App;

** 태그 대신 Fragment 사용

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}
export default App;

3. JSX 안에 자바스크립트 값 사용하기
: JSX 내부에 자바스크립트 변수를 보여줘야 할때에는 {}으로 감싸서 보여준다.

import React from 'react';
import Hello from './Hello';
function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}
export default App;

4. style 과 className
: background-color > backgroundColor
camelCase 형태로 네이밍

import React from "react";
import Hello from "./Hello";
function App() {
  const name = 'react'
  const style ={
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, //기본단위 px
    padding: '1rem' //다른단위 사용시 문자열로 설정
  }
  return(
    <>
    <Hello/>
    <div style={style}>{name}</div>
    </>
  );
  }
  export default App;

4-1. CSS class 설정
: class = 가 아닌 className 으로 설정해주어야한다

import React from "react";
import Hello from "./Hello";
function App() {
  const name = 'react'
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, //기본단위 px
    padding: '1rem' //다른단위 사용시 문자열로 설정
  }
  return(
    <>
    <Hello/>
    <div style={style}>{name}</div>
    <div className="gray-box"></div>
    </>
  );
}
export default App;

5. 주석

: JSX 내부의 주석은 {/**/} 이런식으로 작성.
추가적으로, 열리는 태그 내부에서는 // 이런식으로도 작성가능.

import React from "react";
import Hello from "./Hello";
function App() {
  const name = 'react'
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, //기본단위 px
    padding: '1rem' //다른단위 사용시 문자열로 설정
  }
  return(
    <>
    {/*주석은 화면에 보이지 않습니다 */}
    /* 중괄호로 감싸지 않으면 화면에 보입니다 */
    <Hello
    //열리는 태그 내부에서는 이렇게 주석을 작성할 수 있습니다.
    />
    <div style={style}>{name}</div>
    <div className="gray-box"></div>
    </>
  );
}
export default App;