[React] 14. 카운터앱 (1) UI 구현

서회정

Feb 28, 2026

Contents

1. Viewer 컴포넌트 생성 2. Viewer UI 그리기 3. Controller 컴포넌트 생성 4. Controller UI 그리기 5. 완성본과 같이 스타일링

1. Viewer 컴포넌트 생성

Viewer.jsx 파일을 컴포넌츠 경로 아래에 생성해주자.


const Viewer = () => {
  return <>viewer</>;
};

export default Viewer;

기본적인 코드를 만들고 App.jsx에서 import 하자.


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

function App() {
  return (
    <>
      <Viewer />
    </>
  );
}

export default App;

2. Viewer UI 그리기

우선, 기능을 만들지 않았으니 카운트 숫자는 0으로 입력하자.


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

export default Viewer;

3. Controller 컴포넌트 생성

Viewer 컴포넌트와 마찬가지로 파일을 만들고 컴포넌트의

기본적인 코드를 작성한 뒤 App.jsx에 넣어주자.


const Controller = () => {
  return <>controller</>;
};

export default Controller;


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

function App() {
  return (
    <>
      <Viewer />
      <Controller />
    </>
  );
}

export default App;

4. Controller UI 그리기


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;

5. 완성본과 같이 스타일링

완성본과 동일한 모양으로 만들기 위해

우선 h1 태그로 제목을 입력해주고,

각 컴포넌트를 섹션 태그로 감싸준다.

App.jsx


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

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

export default App;

그리고 스타일을 입히기 위해 class명을 사용해야하기에

App.jsx의 최상위 태그를 div로 만들어주고 className을 부여해주자


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: 400px;
}

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