[React]구구단 출력하기

number 값을 Props로 받고, number값에 맞는 구구단을 출력하는 컴포넌트 예제이다.

 

✅ 첫번째 시도

• src/Multiply.js

function Multiply({n}){
    return(
        <div>
        {n} * 1 = {n} <br />
        {n} * 2 = {n * 2}<br />
        {n} * 3 = {n * 3}<br />
        {n} * 4 = {n * 4}<br />
        {n} * 5 = {n * 5}<br />
        {n} * 6 = {n * 6}<br />
        {n} * 7 = {n * 7}<br />
        {n} * 8 = {n * 8}<br />
        {n} * 9 = {n * 9}
        </div>
    );
}

export default Multiply;

반복문을 사용하지 않고 나열하였다. 

 

• src/Button.js

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

export default Button;

• src/App.js

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

function App(){
  const [number, setNumber] = useState(0);

  function plus(){
    setNumber(number+1);
  }
  
  function minus(){
    setNumber(number-1);
  }

  function double(){
    setNumber(number*2);
  }

  return(
    <div>
      <Multiply n={number} />
      <Button onClick={plus} text="+1" />
      <Button onClick={minus} text="-1" />
      <Button onClick={double} text="*2" />
    </div>
  );
}

export default App;

• 결과화면

✅ 두번째 시도

map 을 사용하여 Mutiply.js 의 코드를 줄여보았다.

• src/Multiplu.js

import React from 'react';


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

export default Multiply;

결과 화면