[P1-1. 카운터 앱 만들기] 프로젝트 준비하기

지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행하겠습니다.

 

[카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱입니다. 첫 리액트 프로젝트인만큼 간단한 기능만 포함하고 있으므로 누구나 어렵지 않게 구현할 수 있습니다.

 

프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있습니다. 이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 일입니다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 합니다. 요구사항 분석은 마치 요리를 시작하기 전 레시피를 점검하는 일과 비슷합니다. 요구사항 분석 없이 프로젝트를 구현하면 중간에 코드를 다시 작성하는 일이 발생할 수 있으므로 반드시 거치는 게 좋습니다.

 

이번 절에서는 요구사항을 분석하면서 [카운터] 앱 프로젝트를 준비하겠습니다.

 

요구사항 분석하기

완성된 프로젝트를 보면서 이 앱에는 어떤 요구사항들이 있는지 확인해 보겠습니다.

 

[카운터] 앱 페이지

 

위 그림은 완성된 [카운터] 앱의 모습입니다. 이 앱은 하나의 페이지이며, 'Simple Counter' 라고 적힌 제목을 제외하면 두 개의 영역으로 나누어져 있습니다.

 

첫 번째 영역은 현재의 카운트를 표시합니다. 따라서 이 영역의 이름을 뷰어(Viewer) 라고 하겠습니다.

 

두 번째 영역에는 카운트를 늘리거나 줄일 수 있는 6개의 버튼이 가지런히 놓여 있습니다. 카운트를 제어하는 영역이라는 의미에서 컨트롤러(Controller) 라고 이름 붙이겠습니다.

 

---

컴포넌트 단위로 생각하기

 

리액트에서 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요합니다. 앞에서 살펴본 Viewer, Controller 영역을 일종의 컴포넌트라고 생각하는 겁니다. 그럼 [카운터] 앱에는 어떤 컴포넌트들이 있는지 알아보겠습니다.

 

다음 그림처럼 이 프로젝트에는 다음과 같은 역할을 담당하는 3개의 컴포넌트가 있습니다.

 

[카운터] 앱의 컴포넌트 구성

 

• App 컴포넌트: Viewer 와 Controller 컴포넌트를 감싸는 템플릿
• Viewer 컴포넌트: 현재의 카운트를 표시함
• Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공함

 

하나의 페이지를 하나의 컴포넌트로 구성해도 문제는 없습니다. 그러나 하나의 컴포넌트가 여러 기능을 갖게 되면 코드가 복잡해져 프로젝트를 관리하기가 어려워 집니다.

 

따라서 컴포넌트는 재사용이 가능한 수준에서 최대한 잘게 쪼개어 개발하는 게 필요합니다. 물론 재사용 가능하다는 것도 여러 기준이 있지만, 간단하면서도 명확한 기준을 하나만 제시한다면 다음과 같습니다.

 

"하나의 컴포넌트는 단 하나의 역할만 수행한다."

---

리액트 앱 만들기

 

준비 과정의 마지막 단계는 리액트 앱을 만드는 작업입니다. 리액트 앱을 생성하는 방법은 chapter5 와 동일합니다.

 

문서(Documnets) 폴더 아래에 project1 폴더를 만든 다음, 비주얼 스튜디오 코드에서 엽니다. 계속해서 터미널을 열고 다음 명령어를 입력해 리액트 앱을 생성합니다.

 

npx create-react-app .

 

리액트 앱을 정상적으로 만들었다면, 계속해서 사용하지 않는 파일과 코드도 삭제합니다. 이 작업 역시 chapter5 리액트 앱을 만들 때와 동일합니다. src  폴더에서 다음 파일을 삭제합니다.

 

• src/App.js
• src/logo.svg
• src/reportWebVitals.js
• src/setupTest.js

 

사용하지 않는 코드 역시 삭제합니다. index.js 를 다음과 같이 수정합니다.

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

 

App.js 를 다음과 같이 수정합니다.

 

import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

 

모두 완료했다면 터미널에서 npm run start 를 입력해 리액트 앱을 시작합니다.

 

불필요한 파일과 코드 삭제