Page 32 -

components/Red.css
.Red {
background: red;
font-size: 1.5rem;
color: white;
width: 128px;
height: 128px;
display: flex;
align-items: center;
justify-content: center;
}

components/Blue.js
import React from 'react';
import './Blue.css';

const Blue = () => {
return <div className="Blue">Blue</div>;
};

export default Blue;

components/Blue.css
.Blue {
background: blue;
font-size: 1.5rem;
color: white;
width: 128px;
height: 128px;
display: flex;
align-items: center;
justify-content: center;
}

components/Menu.js
import React from 'react';
import { Link } from 'react-router-dom';
const Menu = () => {
return (
<ul>
<li>

542

리액트를 다루는 기술_개정판(본문)최종출력용.indb 542 2019-08-20 오전 11:03:32