비동기 통신

CSS를 리액트로?

CSS Module

import styles from "./hello.module.css";
const Hello = () => {
	return (
		<div className={styles.world}>
			Hello, World!!
		</div>
)
}
// hello.module.css
.world {
	color: red;
}

in JS

import styled from "styled-components";
const World = styled.div`
	color: red;
`;
const Hello = () => {
	return (
		<World>
			Hello, World!!
		</World>
)
}

npm install sass

문법

$ashGray: #b2beb5;
$mainColor: white;
$labelPadding: 16px;
body {
	background-color: $mainColor;
}
.label {
	color: $ashGray;
	padding: $labelPadding;
}

mixin

@mixin large-text($color) {
	font: {
	size: 20px;
	weight: bold;
	}
	color: $color;
}
h1 {
	@include large-text(red);
}

react-router

컴포넌트 기반

location, history web API

react router dom

npm install react-router-dom

// App.jsx
import { BrowserRouter, Routes, Route } from "react-bootstrap/Button";

const App = () => {
	return (
		<BrowserRouter>
			<Routes>
				<Route
					path="/home"
					element={Home}
				/>
				<Route
					path="/about"
					element={About}
				/>
		</Routes>
	</BrowserRouter>
	)
}

• BrowserRouter : History API를 사용하여 페이지를 새로 불러오지 않고, 주소를 변경할 수 있음-