[모각코+] 웹 리액트(React) 1월달과정 5일차

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EA%B5%AC%EA%B5%AC%EB%8B%A8-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0

✅ 오늘의 문제 : 구구단 출력하기 by Qcell | 코드메이트

✅ 오늘의 문제 : 구구단 출력하기

Button.js

import React from "react";


const Button = ({text,onClick}) => {
    return <button onClick={onClick}>{text}</button>;
}


export default Button;

 

Multiply.js

import React from "react";


const Multiply = ({number}) => {
    const mul = [1,2,3,4,5,6,7,8,9];
    return (
        <div>
            {mul.map((n) => (
                <p>
                    {number} * {n} = {number*n}
                </p>
            ))}
        </div>
    );
}


export default Multiply;

 

App.js

import React, { useState } from 'react';
import Button from "./Button";
import Multiply from './Multiply';
import styles from './styles/css/App.module.css';


function App() {


  const [number,setNumber] = useState(2);


  function plusClick(){
    setNumber(number+1);
  }
  function minusClick(){
    setNumber(number-1);
  }
  function resetClick(){
    setNumber(0);
  }
  return (
    <div className={styles.container}>
      <Multiply number={number}/>
      <Button className={styles.btn1} onClick={plusClick} text="+1"/>
      <Button className={styles.btn2} onClick={minusClick} text="-1"/>
      <Button className={styles.btn3} onClick={resetClick} text="RESET"/>
    </div>
  );
}
export default App;

 

실행화면