[React] Counter App - UI 구현하기

컴포넌트 만들기

• Viewer
• Controller
• App css 추가

Viewer Component

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

export default Viewer;

Controller Component

const Controller = () => {
  return (
    <div>
      <button>-1</button>
      <button>-10</button>
      <button>-100</button>
      <button>+100</button>
      <button>+10</button>
      <button>+1</button>
    </div>
  );
};

export default Controller

section 태그 사용 이유

• css를 편리하게 사용하기 위해 해당 태그를 사용한다.

App Component

import "./App.css";
import Controller from "./components/Controller";
import Viewer from "./components/Viewer";

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

export default App;

App.css

body {
  padding: 20px;
}

.App {
  margin: 0 auto;
  width: 450px;
}

.App > section {
  background-color: rgb(245, 245, 245);
  border: 1px solid rgb(240, 240, 240);
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 10px;
}

강의 출처:
https://www.inflearn.com/course/한입-리액트