[React] JSX

 

JSX : 리엑트에서 생김새를 정의할 때 사용하는 문법

 

- 리엑트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 자바스크립트로 변환을 해준다.

 

 

변환 규칙

: JSX가 자바스크립트로 제대로 변환이 되려면 몇가지 규칙을 지켜야한다.

 

- 꼭 닫혀야 하는 태그

: 태그는 꼭 닫혀있어야 한다. 

 

- 꼭 감싸져야하는 태그 

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

 

- JSX 안에 자바스크립트 값 사용하기 

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

 

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

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

export default App;

 

 

- style과 className

: 인라인 스타일은 객체 형태로 작성해야하며, 카멜케이스 형태로 네이밍 해줘야 한다.

 

 

- 주석 

: {/* 이런 형태로 */} 작성, 중괄호로 감싸지 않으면 화면에 보인다.

 

- 열리는 태그에서는 // 형태로도 주석 작성이 가능하다.

 

 

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


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;

 

 

출처

 

https://react.vlpt.us/basic/04-jsx.html

4. JSX · GitBook