React 기본 - 4.JSX

JSX
javascript 확장한 문법이며, UI를 구성하기 위해 react와 함께 사용할 것을 권장합니다.
react는 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 포함하여 컴포넌트 형식으로 사용합니다.

const el = <p>Hello, React!</p>

JSX 를 javascript 제대로 변환하기 위한 규칙
1. 닫혀야 하는 태그
태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing(열리고, 바로 닫시는 태그) 태그 라는 것을 사용해야합니다.

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

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <input />
      <br />
    </div>
  );
}

export default App;

2. 반환값 바로 최상단에 감싸져야 하는 태그
두개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다.
빈 div로 감싸게 되면 스타일 관련 설정을 하다가 복잡해지기 때문에 리액트의 Fragment 권장

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

function App() {
  return (
	// 리액트의 Fragment 사용으로 최상단에 감싸기
    <React.Fragment>
      <Hello />
      <div>안녕히계세요</div>
    </React.Fragment>
  );
}

export default App;

3. JSX 안에 자바스크립트 값 사용
JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다.

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

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

export default App;

4. style 과 className
인라인 스타일을 객체 형태로 작성을 해야하며 camelCase 형태로 네이밍을 해주어야 합니다.

import React from 'react';
import Hello from './Hello';
// 가져올 해당 css 파일
import style from './Hello.css'

function App() {
  return (
     <React.Fragment>
      	<Hello />
	// 스타일을 줄 해당 앨리먼트에 import 한 이름.클래스네임
      	<div className={style.div_el}></div>
     </React.Fragment>
  );
}

export default App;