🗓 진행일: 2022.04.16

5-3. JSX

• MyHeader, MyFooter js 파일 만들어서 App.js에서 불러오기
• MyHeader.js

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

export default MyHeader;

• App.js

import React from 'react';
import './App.css';

import MyHeader from './MyHeader';

function App() {
  let name = "seul";

  return (
    // <div className="App"> 
    // 아래의 Fragment 태그는 <> 이런 식으로 비워줘도 됨
    <React.Fragment> 
      <MyHeader/>
      <header className="App-header">
        <h2>안녕 리액트 {name}</h2>
      </header>
    </React.Fragment>
    // </div>
  );
}

export default App;

• React에서 지켜야 하는 몇 가지 규칙
  • 닫힘 규칙: 여는 태그가 있다면 반드시 닫는 태그도 존재해야 한다 (그래서 Image, br 같은 태그는 열자마자 닫아줘야 한다 → 셀프 클로징 태그)
  • 최상위 태그 규칙: return 하는 컴포넌트는 반드시 하나의 최상위 태그가 있어야 한다 (무조건 나머지를 묶어줘야 한다, 아니면 React.Fragment로 감싸줘야 함)

• css로 꾸며주기

App.js에 import 된 App.css로 변경해도 되고,
직접 인라인으로 스타일을 변경해도 된다

import React from 'react';
// import './App.css';

import MyHeader from './MyHeader';

function App() {
  let name = "seul";

  const style = {
    App : {
      backgroundColor: 'black',
    },
    h2 : {
      color: "red",
    },
    bold_text : {
      color: "green",
    },
  };

  return (
    <div style={style.App}> 
      <MyHeader/>
      <h2 style={style.h2}>안녕 리액트 {name}</h2>
      <b style={style.bold_text}>React.js</b>
    </div>
  );
}

export default App;

• 중괄호 안에는 배열, boolean 값 등은 넣을 수 없다
  • String, int 값은 가능함
• 조건부 렌더링: 렌더를 진행할 때 삼항 연산자를 이용하여 값을 표현할 수 있음

const number = 5;

  return (
    <div style={style.App}> 
      <MyHeader/>
      {/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */}
      <h2 style={style.h2}>안녕 리액트</h2>
      <b style={style.bold_text}>
        {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
      </b>
    </div>
  );