project1 [카운터] 앱 만들기

프로젝트 준비하기

　[카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱이다.

UI구현하기

　UI는 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요쇼롤 말한다. 이 요소들의 사용성을 높이기 위해 기능을 추가하기도 하고, 특별한 형태나 색상 등의 스타일을 적용하기도 한다.

Viewer 컴포넌트 만들기

　Viewer 컴포넌트를 다음과 같이 작성한다.

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

　App.js 파일을 다음과 같이 작성한다.

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

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

Controller 컴포넌트 만들기

　Controller.js를 만들고 다음과 같이 작성한다.

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;

　Controller 컴포넌트를 페이지에 렌더링하기위해 App.js를 수정한다.

import './App.css';
import Controller from './component/Controller';
import Viewer from './component/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: 500px;
}

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

결과는 다음과 같다.