[React] JSX 사용하기

<></>가 아닌 < />로 사용하는 것을 셀프 클로징 태그라고 한다.

ES Module이란 무엇인가?

• ES6에 도입된 모듈 시스템.
• import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있다.

 

CSS 파일을 사용하여 스타일링하기

MyHeader.tsx

내보내기(export)

const MyHeader = () => {
    // 컴포넌트 내에 return 필요
    return <header>헤더</header>;
};


export default  MyHeader;

App.css

.App, h2, #bold_text 추가

.App {
  background-color: black;
}
h2{
  color: red;
}
#bold_text {
  color: green;
}

App.tsx

React에서는 html 태그에서 class 속성 대신 className으로 쓰고 클래스명을 입력할 수 있다. JavaScript에서 class가 예약어이기 때문이다.

가져오기(import)

import './App.css';
import MyHeader from "./MyHeader.tsx";

function App() {
    const name = "test";

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

export default App;

export default로 정의한 함수를 내보낼 수 있으며, 한번에 한 개의 함수만 export default할 수 있다.

 

인라인 스타일 방식

// import './App.css';
import MyHeader from "./MyHeader.tsx";

function App() {
    const name = "test";

    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;

삼항 연산자, 조건부 렌더링

// import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import './App.css';
import MyHeader from "./MyHeader.tsx";

function App() {
    const name = "test";

    const style = {
        App: {
            backgroundColor: "black",
        },
        h2: {
            color: "red",
        },
        bold_text: {
            color: "green",
        }
    };
    const func = () => {
        return "func";
    }

    const number = 5;

    return (
        <>
            <div style={style.App}>
                {/*셀프 클로징 태그*/}
                <MyHeader/>
                <h2 style={style.h2}>안녕 리액트 {name}</h2>
                <h2 style={style.h2}>안녕 리액트 {func()}</h2>
                {/*삼항 연산자, 조건부 렌더링*/}
                <b style={style.bold_text}>
                    {number} 는 : {number % 2 === 0 ? "짝수" : "홀수"}
                </b>
            </div>
        </>
    );
}

export default App;