JSX

JSX는 리액트에서 conponent를 정의할 때, 사용하는 문법입니다.

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

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

export default App;

JSX의 특징

container element

모든 JSX 엘리먼트는 컨테이너 엘리먼트가 존재해야합니다.
아래와 같은 코드의 경우 에러를 발생하게 됩니다.

// 에러 발생
import React from 'react';
import Hello from './Hello';

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

export default App;

JSX 안에서 Javscript 사용하기

JSX 안엣 자바스크립트를 표현하는 방법은 간단합니다. 그냥 {}으로 랩핑을 해주면 됩니다.

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

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

export default App;

JSX에서 style 사용하기

JSX 안에서 css를 설정할 때는 객체를 만들어 사용하시면 됩니다. 단 설정 시에는 스타일 key 값으로 camelCase를 사용해야 정상작동합니다.

camelCase는 첫문자는 소문자로 시작하지만 이어지는 단어들이 대문자로 시작되는 언어를 말합니다.

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

function App() {
  let style = {
   color : 'aqua',
   backgroundColor: 'black'
  };
  return (
    <div style={style}>hello React!</div>
  );
}

export default App;

JSX 안에서 주석 작성하기

JSX 안에서의 주석은 // 이 아닙니다.
{/*...*/} 형식으로 작성해주세요.
주의 하실점은 반드시 컨테이너 엘리먼트 안에 주석이 작성되어야 합니다!!

컨테이너 엘리먼트는 주석이 작성되면 안됩니다!

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

function App() {
  let style = {
   color : 'aqua',
   backgroundColor: 'black'
  };
  return (
    <div style={style}>
    {/*This is How you comment*/}
	{/*Multi-line Testing*/}
	React Component
    </div>
  );
}

export default App;

클래스를 통한 JSX css 디자인

리액트에서는 컴포넌트에 .css 파일을 import 할 수 있습니다.
만약 여러분이 클래스를 통해 css 속성을 적용하고 싶다면,
JSX 태그 안에 className 을 써주면 됩니다.

JSX 는 HTML 이 아닙니다! class를 쓰면 작동하지 않습니다!

import "./ExpenseItem.css";

function ExpenseItem() {
  return (
    <div className="expense-item">
      <div>March 28th 2021</div>
      <div className="expense-item__description">
        <h2>Car Insurance</h2>
        <div className="expense-item__price">$294.67</div>
      </div>
    </div>
  );
}

export default ExpenseItem;