[20240509] 앱개발 시작하기 #22 | Counter App

하나의 코드로 통합시

import './App.css'
import { useRef, useState } from 'react'

function App() {
  // const num = useRef(0);
  const [num, setNum] = useState(0);

  const onClickNum = (e) => {
    setNum(num+e);
  }

  return (
    <div>
      <h2>Simple Counter</h2>
      <div className='t1'>
        <ul>
          <li>현재 카운트 : </li>
          <li>{num}</li>
        </ul>
      </div>
      <div className='t2'>
        <ul>
          <button onClick={()=>{onClickNum(-1)}}>-1</button>
          <button onClick={()=>{onClickNum(-10)}}>-10</button>
          <button onClick={()=>{onClickNum(-100)}}>-100</button>
          <button onClick={()=>{onClickNum(100)}}>+100</button>
          <button onClick={()=>{onClickNum(10)}}>+10</button>
          <button onClick={()=>{onClickNum(1)}}>+1</button>
        </ul>
      </div>
    </div>
  )
}

export default App

구성요소에 따른 분할 

App.jsx

import './App.css'
import {  useState } from 'react'
import Controller from './components/Controller';
import Viewer from './components/Viewer';

function App() {
  const [num, setNum] = useState(0);

  const onClickNum = (e) => {
    setNum(num+e);
  }

  return (
    <div>
      <Viewer num={num}></Viewer>
      <Controller onClickNum = {onClickNum}></Controller>
    </div>
  )
}

export default App

Controller.jsx

import { useState } from 'react'

const Controller = ({onClickNum}) => {
    return(
        <div className='t2'>
          <ul>
            <button onClick={()=>{onClickNum(-1)}}>-1</button>
            <button onClick={()=>{onClickNum(-10)}}>-10</button>
            <button onClick={()=>{onClickNum(-100)}}>-100</button>
            <button onClick={()=>{onClickNum(100)}}>+100</button>
            <button onClick={()=>{onClickNum(10)}}>+10</button>
            <button onClick={()=>{onClickNum(1)}}>+1</button>
          </ul>
        </div>
    )
}

export default Controller;

Viewer.jsx

const Viewer = ({num}) => {
    return(
        <div>
            <h2>Simple Counter</h2>
            <div className='t1'>
            <ul>
                <li>현재 카운트 : </li>
                <li>{num}</li>
            </ul>
            </div>
        </div>
    )
}

export default Viewer;