[React - 2] JSX

JSX (JavaScript XML)

const element = <h1>Hello, world!</h1>;

JSX는 리액트 컴포넌트에서 xml 형식의 값을 반환해는 것

 

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다.

그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다.

이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다.

컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

 

Babel이란?

Babel 은 자바스크립트의 문법을 확장해주는 도구다.

아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을

정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 한다.

규칙

1.  JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

<div>
  <div></div>
  <p></p>
</div>

두개 이상의 태그를 감싸는 태그가 위처럼 <div></div> 될 수도 있고 그 밖에 다른 태그도 가능하다.

만약 굳이 어떠한 HTML element로 감싸고 싶지 않다고 하면 그림과 같이 비어있는 태그(Fragment 태그)를 사용하면 된다.

 Fragment 태그는 아무런 역할도 하지 않고 이 규칙을 지켜준다.

<>
  <div></div>
  <p></p>
</>

<Fragment>
  <div></div>
  <p></p>
</Fragment>

위 2개는 Fragment 태그이다. 둘 다 사용가능.

---

2. React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 합니다.

<div class="box"></div> // 불가능
<div className="box"></div> // 가능

만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신에

자바스크립트 클래스로 받아들이기 때문에 주의해야 합니다.

---

3. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.

---

4. JSX 에서 태그에 style를 설정하는 방법은 HTML 에서 설정하는 방법과 조금 다릅니다.

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;

인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 

backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다.

---

5. 주석:  JSX 내부의 주석은 {/* example */} 작성합니다.

<>
  {/* 이 주석은 화면에 보이지 않습니다 */}
  /* 이 주석은 중괄호로 감싸져 있지 않아 화면에 보입니다 */
</>

---

6. 태그 안의 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.

function App() {
  return(
    <>
	  { 조건 ? <span>참</span> : <span>거짓</span> }
    </>
  )
}