Button.js import styles from './Button.module.css'; function Button({ onClickButton, text }) {   return (     <button className={styles.btnstyle} onClick={onClickButton}>{text}</button>   ); } export default Button; Calculator.js import { useState } from 'react'; import Button from './Button'; import Layout from './Layout'; import Dan from './Dan'; function Calculator() {   const [number, setNumber] = useState(1);   function addNumber() {     setNumber(number + 1);   }   function subNumber() {     if (number > 1)       setNumber(number - 1);   }   function mulNumber() {     if (number > 0)       setNumber(number * 2);   }   return (     <Layout>       <Dan number={number} />       <Button text={"＋1"} onClickButton={addNumber} />       <Button text={"－1"} onClickButton={subNumber} />       <Button text={"×2"} onClickButton={mulNumber} />     </Layout>   ); } export default Calculator; Dan.js import styles from './Dan.module.css'; function Dan({ number }) {   return (     <div className={styles.dan}>       {number} × 1 = {number * 1}<p/>       {number} × 2 = {number * 2}<p/>       {number} × 3 = {number * 3}<p/>       {number} × 4 = {number * 4}<p/>       {number} × 5 = {number * 5}<p/>       {number} × 6 = {number * 6}<p/>       {number} × 7 = {number * 7}<p/>       {number} × 8 = {number * 8}<p/>       {number} × 9 = {number * 9}     </div>   ); } export default Dan; Layout.js import styles from "./Layout.module.css"; function Layout({children}) {   return (     <div className = {styles.container}>{children}</div>   ); } export default Layout; 실행 결과

App.js import Web from './Web'; function App() {   return (     <div>       <Web/>     </div>   ); } export default App; Web.js import styles from './Web.module.css' function Web(){   return(     <div>       <h1 className={styles.title}>Google</h1>       <p>구글 LLC(영어: Google LLC)는 전 세계의 정보를 체계화하여 모든 사용자가 편리하게 이용할 수 있도록 하는 것을 목표로 하는 미국의 다국적 기업이다.<br/>       검색 서비스 제공을 주력으로 한다.</p>     </div>   ); } export default Web; Web.module.css .title {     color: royalblue; } - 실행 결과

App.js import Web from './Web'; function App() {   return (     <div>       <Web/>     </div>   ); } export default App; Web.js function Web(){   return(     <div>       <h1>구글</h1>       <p>구글 LLC(영어: Google LLC)는 전 세계의 정보를 체계화하여 모든 사용자가 편리하게 이용할 수 있도록 하는 것을 목표로 하는 미국의 다국적 기업이다.<br/>       검색 서비스 제공을 주력으로 한다.</p>     </div>   ); } export default Web;