App.js
import React, { useState } from 'react';
import Button from './Button';
import Layout from './Layout';
import Gugudan from './Gugudan';
function App() {
const [number, setNumber] = useState(0);
function onClickIncrease() {
setNumber(number + 1);
}
function onClickDecrease() {
setNumber(number - 1);
}
function onClickMultiply() {
setNumber(number * 2);
}
return (
<Layout>
<Gugudan number={number}></Gugudan>
<Button onClick={onClickIncrease} text="+1" />
<Button onClick={onClickDecrease} text="-1" />
<Button onClick={onClickMultiply} text="*2" />
</Layout>
);
}
export default App;
Gugudan.js
function Gugudan({number}){
const n = [0,1,2,3,4,5,6,7,8,9];
return(
<div>
{
n.map((num)=><p>{number}*{num}={number*num}</p>)
}
</div>
)
}
export default Gugudan;
function Button({ text, onClick }) {
return (
<button onClick={onClick}>{text}</button>
)
}
export default Button;