리액트 강좌: 카운터 앱 예제 만들기

현대 웹 개발에서 리액트는 가장 인기 있는 라이브러리 중 하나입니다. 리액트를 사용하면 사용자 인터페이스를 구축하는 것이 쉬워지고, 컴포넌트 기반 구조 덕분에 코드의 재사용성과 관리가 용이해집니다. 이번 강좌에서는 기본적인 카운터 앱을 만들어 보면서 리액트의 기본 개념과 실제 UI 구현 방법을 살펴보겠습니다.

1. 리액트 소개

리액트는 Facebook에 의해 개발된 오픈 소스 JavaScript 라이브러리로, UI를 구성하는 컴포넌트를 만들고 관리하는 데 최적화되어 있습니다. 리액트를 사용하면 각 컴포넌트를 독립적으로 개발하고, 상태(state) 변화를 통해 동적으로 UI를 업데이트할 수 있습니다. 이를 통해 복잡한 SPA(Single Page Application)에서도 효율적으로 작업할 수 있습니다.

2. 카운터 앱 개요

카운터 앱은 가장 간단한 형태의 애플리케이션 중 하나로, 사용자가 버튼을 클릭하여 숫자를 증가시키거나 감소시키는 기능을 제공합니다. 이 예제를 통해 리액트의 기본적인 개념인 컴포넌트, 상태, 이벤트 핸들링 등을 배우게 될 것입니다.

3. 개발 환경 설정

리액트 개발을 시작하기 위해 여러분의 PC에 Node.js와 npm이 설치되어 있어야 합니다. Node.js는 JavaScript 런타임 환경이며, npm은 JavaScript 패키지 관리자입니다.

Node.js 설치: Node.js 공식 사이트에서 LTS 버전을 다운로드하여 설치합니다.
create-react-app 설치: create-react-app은 리액트 애플리케이션을 쉽게 생성할 수 있는 도구입니다. 명령어 창에서 다음 명령어를 입력하여 설치합니다.

npm install -g create-react-app

4. 새로운 리액트 프로젝트 만들기

이제 create-react-app을 사용하여 새로운 프로젝트를 생성하겠습니다. 아래의 명령어를 입력하여 ‘counter-app’이라는 이름의 프로젝트를 생성합니다:

npx create-react-app counter-app

프로젝트가 성공적으로 생성되면 디렉토리로 이동하여 앱을 실행해보겠습니다.

cd counter-app
npm start

브라우저에서 http://localhost:3000에 접속하면 기본 리액트 앱 화면을 확인할 수 있습니다.

5. 카운터 컴포넌트 구현하기

이제 카운터 기능을 구현할 컴포넌트를 만들어 보겠습니다. 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;

6. App.js에 카운터 컴포넌트 추가하기

이제 방금 만든 Counter 컴포넌트를 src/App.js 파일에 추가하여 화면에 표시하겠습니다. 코드는 다음과 같습니다:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
    return (
        
            
                
            
        
    );
}

export default App;

7. 스타일 적용하기

카운터 앱의 UI를 더 보기 좋게 만들기 위해 CSS를 추가해 보겠습니다. src/App.css 파일에 아래와 같은 스타일을 추가합니다:

.App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

8. 카운터 앱 실행하기

모든 것이 준비되었으니, 다시 npm start 명령어를 실행하여 앱을 실행합니다. 브라우저에서 카운터가 증가하고 감소하는 모습을 확인할 수 있을 것입니다.

9. 추가 기능 구현하기

카운터 앱에 더 많은 기능을 추가하여 리액트를 더 깊이 이해해 보겠습니다.

리셋 기능: 카운터를 0으로 초기화하는 버튼을 추가합니다.
짝수/홀수 구분: 카운터의 값을 짝수 혹은 홀수일 때 배경색을 변경합니다.

리셋 기능 추가하기

리셋 버튼을 추가해 보겠습니다. Counter.js 파일을 다음과 같이 수정합니다:

const reset = () => {
    setCount(0);
};

그리고 리셋 버튼을 아래에 추가합니다.

<button onClick={reset}>리셋</button>

짝수/홀수 구분

카운터의 값을 짝수와 홀수에 따라 배경 색상이 변경되도록 구현해 보겠습니다. 아래와 같이 Counter.js 파일을 수정합니다:

const backgroundColor = count % 2 === 0 ? 'lightblue' : 'lightcoral';

return (
    <div style={{ backgroundColor }}>
        <h1>카운터: {count}</h1>
        <button onClick={increment}>증가</button>
        <button onClick={decrement}>감소</button>
        <button onClick={reset}>리셋</button>
    </div>
);

10. 종료하며

이번 강좌를 통해 리액트의 기본적인 개념과 카운터 앱을 구현하면서 실습해 보았습니다. 리액트는 이러한 기본 컴포넌트를 바탕으로 더 복잡한 애플리케이션을 구축하는 데 도움이 되는 훌륭한 도구입니다. 이 강좌가 여러분에게 유익한 학습이 되었기를 바랍니다. 앞으로도 리액트를 활용하여 다양한 프로젝트를 만들어 보시길 추천합니다.