Viewer 컴포넌트 만들기

const Viewer = () => {
    return (
        <div>
            <div>현재 카운트 : </div>
            <h1>0</h1>
        </div>  
    );
};

export default Viewer;
import './App.css';
import Viewer from './ponent/Viewer';

function App() {
  return (
    <div className="App">
      <h1>Simple Conter</h1>
      <section>
        < Viewer/>
      </section>
    </div>
  );
}

export default App;

Controller 컴포넌트 만들기

import './App.css';
import Viewer from './ponent/Viewer';

function App() {
  return (
    <div className="App">
      <h1>Simple Conter</h1>
      <section>
        < Viewer/>
      </section>
    </div>
  );
}
export default App;
import './App.css';
import Controller from './ponent/Controller';
import Viewer from './ponent/Viewer';

function App() {
  return (
    <div className="App">
      <h1>Simple Conter</h1>
      <section>
        < Viewer/>
      </section>
      <section>
        <Controller />
      </section>
    </div>
  );
}
export default App;

컴포넌트 스타일링

body{padding: 20px;};
.App {margin: 0 auto; width: 500px;}
.App > section{padding: 20px; background-color: #f8f8f8; border: 1px solid #cccccc; border-radius: 5px; margin-bottom: 10px;}

<aside> 💡 Props

</aside>