[6] 카운터 앱

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

import './App.css'

function App() {
  //viewer와 controller가 형제관계이므로 부모인 app에서 useState
  const [count, setCount] = useState(0);	

  const onClickButton = (value) => {
    setCount(count + value);
  }

  return (
    <div className='App'>
      <h1>Simple counter</h1>
      <section>
        <Viewer count={count}/>
      </section>
      <section>
        <Controller onClickButton={onClickButton}/>
      </section>     
    </div>
  )
}

export default App

//Viewer.jsx
const Viewer = ({count}) => {

    return(
        <>
            <div>현재카운트 :</div>
            <h1>{count}</h1>
        </>
    ) 
}
export default Viewer;

//controller.jsx
const Controller = ({onClickButton}) => {
    return(
        <>
            <button
                onClick={()=>{
                    onClickButton(-100);
                }}
            >-100</button>
            <button>-10</button>
            <button>+1</button>
            <button>+10</button>
            <button>+100</button>
        </>
    ) 
}
export default Controller;

 
 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런