[React] JSX의 정의와 사용법

JSX란?

HTML 태그는 .js 파일 안에서 쓸 수 없어서 나온것이 JSX이다.

• JSX는 자바스크립트의 확장 문법이다.
• XML과 매우 비슷하게 생겼으며, 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

+ 그럼 JSX에서 쓰는 <div>~~</div>는 DOM 요소인가?
ㅡ> 정확히는 React 요소이다. 리액트 돔을 구성하는 건 리액트 요소라고 생각하자.

---

JSX 문법

태그는 꼭 닫아주기

function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

위의 코드처럼 태그를 닫지 않으면 오류가 난다.

---

무조건 1개의 엘리먼트를 반환하기

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

위의 코드처럼 엘리먼트가 2개 이상일때 오류가 난다.
컴포넌트에서 반활할 수 있는 엘리먼트는 아래 코드처럼 1개이다.

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

---

JSX에서 javascript 값을 가져오려면?

ㅡ> 중괄호를 사용한다.

const cat_name = 'perl';
    return (
      <div>
        hello {cat_name}!
      </div>
    );

+ 값을 가져올 때 뿐만 아니라 map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.

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

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

---

class 대신 className

<div className="App">

+ id는 그냥 id로 사용한다.

---

인라인으로 style 주기

HTML

<p style="color: orange; font-size: 20px;">orange</p>

JSX

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}