리액트(React)는 UI를 만들기 위해 가장 많이 사용되는 JavaScript 라이브러리 중 하나입니다. 이 강좌에서는 리액트를 사용하여 간단한 카운터 앱을 만드는 방법을 알아보겠습니다. 이 앱은 기본적인 상태(state) 관리, 이벤트 처리 및 리액트의 컴포넌트 기반 아키텍처를 활용하여 구성됩니다.
1. 프로젝트 설정
먼저, 리액트 프로젝트를 시작하기 위해 create-react-app을 사용해 보겠습니다. 이 도구는 리액트 앱을 쉽게 설정할 수 있도록 도와줍니다. 아래 명령어를 실행하여 리액트 프로젝트를 생성합니다.
npx create-react-app counter-app
프로젝트가 생성되면 생성된 디렉토리로 이동합니다.
cd counter-app
2. 카운터 컴포넌트 생성하기
이제 카운터 컴포넌트를 만들어 보겠습니다. src 폴더 내에 Counter.js라는 파일을 생성하고 다음 코드를 작성합니다.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
카운트: {count}
);
};
export default Counter;
3. 카운터 컴포넌트 추가하기
이제 메인 App.js 파일에 이 카운터 컴포넌트를 추가해 보겠습니다. src/App.js 파일을 열고 아래와 같이 수정합니다.
import React from 'react';
import Counter from './Counter';
function App() {
return (
리액트 카운터 앱
4. 앱 실행하기
모든 코드 변경이 완료되었으므로, 다음 명령어로 앱을 실행합니다.
npm start
웹 브라우저에서 http://localhost:3000를 열면 기본적인 카운터 앱을 볼 수 있습니다.
5. 기능 추가하기
이제 카운터 앱에 몇 가지 추가 기능을 구현해 보겠습니다. 예를 들어, 카운트를 리셋하는 버튼과 최대값 및 최소값을 설정하는 기능을 추가할 수 있습니다.
5.1. 리셋 버튼 추가하기
카운터 컴포넌트에 리셋 버튼을 추가해 보겠습니다. 아래와 같이 코드를 수정합니다.
const reset = () => {
setCount(0);
};
return (
카운트: {count}
);
5.2. 최대 및 최소값 제한하기
이제 카운트가 최대값과 최소값을 초과하지 않도록 제한해 보겠습니다. 아래와 같이 코드를 수정합니다.
const MAX_COUNT = 10;
const MIN_COUNT = 0;
const increment = () => {
if (count < MAX_COUNT) {
setCount(count + 1);
}
};
const decrement = () => {
if (count > MIN_COUNT) {
setCount(count - 1);
}
};
6. 상태 관리의 효율성
리액트에서 상태 관리 방법은 여러 가지가 있습니다. 이 앱처럼 간단한 경우에는 useState 훅이 적합하지만, 애플리케이션이 커지거나 상태 관리가 복잡해지면 Context API나 Redux와 같은 외부 상태 관리 라이브러리를 고려해 볼 수 있습니다.
7. 결론
이번 강좌에서는 리액트를 사용하여 간단한 카운터 앱을 만들어 보았습니다. 기본적인 상태 관리, 이벤트 처리, 그리고 컴포넌트 기반 아키텍처에 대해 알아보았습니다. 이와 같은 기초를 바탕으로, 더 복잡한 애플리케이션을 개발할 수 있는 기반이 마련되었습니다.
8. 다음 단계
더 많은 기능을 구현하거나 디자인을 개선하여 나만의 카운터 앱을 확장해 보세요. 리액트의 다양한 기능을 활용하면 훨씬 더 복잡하고 매력적인 애플리케이션을 개발할 수 있습니다. 다음 강좌에서는 리액트 라우터를 사용하여 다중 페이지 애플리케이션을 만드는 방법에 대해 알아보겠습니다.