2. JSX가 무엇이며, 기본 규칙은 무엇일까

# JSX 는 리액트에서 생김새를 정의할 때 사용하는 문법.

HTML처럼 생겼지만, 실제로 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX → JavaScript로 변환을 해줌!

 

Babel은 자바스크립트의 문법을 확장해주는 도구.
아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써
구형 브라우저의 환경에서도 제대로 실행될 수 있게 해주는 역할
ㄴURL : https://bit.ly/2wMpkk2

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

 

Babel 에서 JSX가 JavaScript 로 변환

# JSX 가 JavaScript로 제대로 변환이 되려면 꼭 지켜주어야 하는 몇 가지 규칙!

 

1. 태그는 반드시 닫아야 한다.

HTML에서 input 혹은 br 태그는 닫지 않고 사용하기도 하지만, 리액트에서는 반드시 닫아주어야 함.

​

Tip) start Tag와 end Tag 사이에 내용이 들어가지 않을 때에는 'Self Closing' 태그라는 것을 사용해야 한다!

열리고, 바로 닫히는 태그 <Hello />

 

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

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <div>
    </div> // 태그를 열었으면 꼭 닫아주어야 함! <div></div>
  );
}

export default App;

 

2. 두 개 이상의 태그는 반드시 하나의 태그로 감싸져야 한다.

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

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

위 코드에서 <Hello />와 <div> 태그를 <div>로 감싸주어야 함!

하지만, 반드시 <div>로 감싸주어야 하는 것은 아니고, Fragment <> </>라는 것을 사용해주면 된다.

(Fragment 는 브라우저에서 별도의 엘리먼트로 나타나지 않음!)

 

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

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

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

 

3. JSX 내부에 자바스크립트 변수를 사용할 때에는 {} 으로 감싼다.

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

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

export default App;

 

4. JSX에서 스타일 지정하기

- 인라인 스타일은 객체 형태로 작성

- dash(-)로 구분되어 있는 이름들은 camelCase 형태로 네이밍 해주어야 함. ex) background-color → backgroundColor

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;

- CSS class 설정할 때 class= 가 아닌 className= 으로 설정해주어야 한다!

 

// App.css
.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

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;

 

5. JSX 내부에서 주석은 {/* 주석 내용 */} 의 형태로 작성해야 한다. (단, 열리는 태그 내부에서는 // 사용도 가능)

{/* 주석은 화면에 보이지 않습니다 */}
/* 중괄호로 감싸지 않으면 화면에 보입니다 */
<Hello 
// 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있습니다.
/>

---

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