2. JSX

1. JSX

리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 *JSX를 JavaScript로 변환해줌

 

*JSX: Javascript XML, 자바스크립트를 확장한 문법으로 리액트 엘리먼트를 생성함

 

(1) 꼭 닫혀야 하는 태그

- self closing 태그

<div></div>
<br/>
<input/>

 

(2) 꼭 감싸져야하는 태그

- 리액트는 하나의 컴포넌트만 리턴할 수 있기 때문에 하나의 태그로 감싸주어야 함

- Fragment : 이름없이 태그 작성하면 만들어지고 브라우저 상에서 별도의 엘리먼트로 나타나지 않음

<></>

 

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

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

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

export default App;

 

style과 className

- JSX에서 태그에 style, CSS class는 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>
      <div className="gray-box"></div>
    </>
  );
}

export default App;