JSX

1. JSX 기본 형식

1. jSX의 함수는 반드시 어떤 값을 return 해야한다.
2. import Reactß from 'react'; 리액트 불러오기
   (리액트 기능을 사용하지 않는다면 불러오지 않아도 됨)
3. export default MyHeader; 컴포넌트 내보내기

import React from 'react';

const MyHeader = () => {
  return <header>헤더</header>
};

export default MyHeader;

JSX의 표현식은 반드시 하나의 최상위 태그

JSX의 표현식은 반드시 하나의 최상위 태그를 가져야한다.

function App() {
  let name = "홍길동";

  return (
    <div className="App"> // 최상위 태그
      <MyHeader/>
      <header className="App-header">
        <h2>안녕 리액트 {name}</h2>
      </header>
    </div>
  );
}

React.Fragment

그러나 최상위 태그를 쓰고싶지 않다면 React.Fragment를 사용할 수 있다.
아래와 같이 사용하면 출력된 화면에서 감싸진 최상위 태그가 없이 반영된 것을 확인할 수 있다.
또한, 이 기능은 react의 기능이므로 리액트를 불러오는 import Reactß from 'react';코드를 꼭 사용해주어야 한다.

function App() {
  let name = "홍길동";

  return (
    <React.Fragment>
      <MyHeader/>
      <header className="App-header">
        <h2>안녕 리액트 {name}</h2>
      </header>
    </React.Fragment>
  );
}

2. jsx에서 style 사용

1. jsx파일에서 css파일 import 하여 사용하기

import './App.css';

2. jsx 파일에서 inline style 사용하기
   jsx 파일안에서 스타일 객체를 만들어 inline 형식으로 불러올 수 있다.

function App() {
  let name = "홍길동";

  const style = {
    App : {
      backgroundColor : 'black',
    },
    h2 : {
      color : '#fff',
    },
    bold_text : {
      color : 'aqua',
    }
  }

  return (
    <div style={style.App}> // 인라인 스타일
      <MyHeader/>
      <h2 style={style.h2}>안녕 리액트 {name}</h2>
      <b style={style.bold_text}>React.js</b>
    </div>

  );
}

3. jsx 조건부 랜더링 ⭐️

jsx파일에서는 조건에 따라 각각 다른것을 랜더링하게 하는 조건부 랜더링이 가능하다.

function App() {

  const number = 5;

  return (
    <div>
      <b>
        {number}는 {number % 2 === 0 ? '짝수입니다':'홀수입니다'}
      </b>
    </div>

  );
}