[React] 컴포넌트를 표현하는 JSX

📝 JSX란?

자바스크립트에 XML을 추가한 확장형 문법
JSX를 이용하면 Javascript나 리액트가 제공하는 API로 개발하면 코드양이 많아질 수 있는 것을 보완하여 개발자가 쉽게 코드를 기술 할 수 있도록 한다.

📝 JSX 특징

1. 태그는 무조건 닫혀야한다.

간혹 jsx문법에서 input태그를 안닫는 경우가 있는데 이럴 경우 오류가 발생하기 때문에 꼭 닫아줘야 한다.

<input type="text"> x
<input type="text" /> o <- 셀프클로우징 태그

2. 두개이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야한다.

리액트에서 두 개 이상의 태그를 사용할 때는 전체를 감싸는 태그가 필요하다.
하지만 불필요한 div 태그가 많아진다는 문제점이 있다.
이 때 div태그를 쓰지 않기 위해 Fragment를 사용한다.

import  React,  {  Component, Fragment  }  from  'react';
class  App  extends  Component {
	render() {
		return (
			<Fragment>
				<div>안녕하세요</div>
				<div>리액트</div>
			</Fragment>
		);
	}
}

==> Fragment 활용시 불필요한 최상위 div 태그 없이 사용할 수 있다.

3. 자바스크립트 표현

JSX 내부에서 변수를 사용하려면 코드를 { } 로 감싸면 된다.

import React, { Component } from "react";

class App extends Component {
  render() {
    const title = "Hello World";
    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
  }
}

export default App;

4. if 문 대신 조건부 연산자

JSX 내부의 자바스크립트에서는 if 문을 사용할 수 없다.
JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND연산자(&&)를 사용한다.

5. 카멜케이스 표기법을 사용한다.

CSS 속성은 스네이크표기법을 사용하였지만 react에서는 카멜케이스 표기법을 사용한다.
예로 들면
background-color : X
backgroundColor : O

const style = {
    backgroundColor : 'deepskyblue',
    fontSize : 30,
    color : 'white',
    padding : '1em'
  }

6. class 대신 className

JSX 에서는 class 가 아닌 className 으로 설정해 주어야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        my-app
      </div>
    );
  }
}

export default App;

7. 주석

주석은 아래처럼 {/ 내용 /} 사이에 넣거나, 태그 사이에 넣을 수 있다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {/* 주석 내용 */}
        <div
        // 태그 사이에 주석 내용
        >my-app
        </div>
      </div>
    );
  }
}

export default App;