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

리액트(React)는 현대 웹 개발에서 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. 이 강좌에서는 리액트를 사용하여 카운터앱을 만드는 방법을 배웁니다. 카운터앱은 매우 간단한 프로젝트이지만, 리액트의 기본 개념을 이해하고 활용하는 데 큰 도움이 됩니다. 본 강좌의 목표는 다음과 같습니다:

  • 리액트의 기본 개념 이해하기
  • 리액트 컴포넌트 생성 및 관리하기
  • 상태(state)와 속성(props) 이해하기
  • 이벤트 처리 및 상태 업데이트 구현하기
  • 리액트를 통해 애플리케이션 개발하기

1. 프로젝트 준비하기

본 카운터앱 프로젝트를 시작하기 전에, 필요한 준비물을 정리해 보겠습니다. 개발에 필요한 기본적인 환경을 마련해야 합니다.

1.1. 개발 환경 설정

리액트를 사용하기 위해서는 먼저 Node.js와 npm(Node Package Manager)를 설치해야 합니다. Node.js는 JavaScript 실행 환경을 제공하고, npm은 패키지 관리를 위한 도구입니다.

  1. Node.js 다운로드: Node.js 공식 웹사이트에서 설치 프로그램을 다운로드하여 설치합니다.
  2. npm 확인: 설치가 완료된 후, 다음 명령어를 통해 설치된 Node.js와 npm의 버전을 확인합니다.
    3. node -v
npm -v

1.2. 새로운 리액트 프로젝트 생성

리액트 프로젝트를 생성하기 위해, Create React App라는 도구를 사용합니다. 이는 리액트 앱의 초기 설정을 자동으로 구성해줍니다. 다음 명령어를 사용하여 새로운 리액트 프로젝트를 생성합니다:

npx create-react-app counter-app

위 명령어를 입력하면 counter-app이라는 이름의 폴더가 생성되며, 리액트 애플리케이션의 기본 템플릿이 설정됩니다. 완료 후 해당 폴더로 이동합니다:

cd counter-app

1.3. 개발 서버 실행

프로젝트 폴더로 이동한 후, 다음 명령어로 개발 서버를 실행할 수 있습니다:

npm start

이 명령어를 입력하면 기본 웹 브라우저에서 `http://localhost:3000` 주소로 리액트 앱이 열립니다. 초기 화면을 통해 리액트가 정상적으로 설치되었는지 확인합니다.

2. 카운터앱 설계

이제 카운터앱의 기능과 UI에 대해 간단히 설계해 보겠습니다. 기본적으로 이 앱은 사용자가 버튼을 클릭하여 카운트를 증가시키거나 감소시킬 수 있는 기능을 제공합니다.

2.1. 주요 기능

  • 카운트를 증가시키는 버튼
  • 카운트를 감소시키는 버튼
  • 현재 카운트를 표시하는 텍스트
  • 초기 카운트 값을 설정할 수 있는 기능

2.2. UI 설계

카운터앱의 UI는 간단합니다. 기본적으로 버튼 2개와 상태를 표시할 텍스트가 포함됩니다. 기본적인 HTML 구조를 통해 컴포넌트를 설계합니다.

3. 카운터앱 구현

이제 실제로 카운터앱을 구현해 보겠습니다. src 폴더 내에 Counter.js 파일을 생성하고 컴포넌트를 작성합니다.

3.1. Counter 컴포넌트 생성

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;

위의 코드는 간단한 카운터 기능을 포함한 리액트 컴포넌트입니다. useState 훅을 사용하여 카운트 상태를 관리합니다.

3.2. App.js에 Counter 컴포넌트 추가

이제 App.js 파일을 열어 Counter 컴포넌트를 추가합니다. 해당 파일을 다음과 같이 수정합니다:

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

function App() {
    return (
        

            
        

    );
}

export default App;

4. 스타일링 추가하기

카운터앱에 일부 스타일을 추가하여 더 보기 좋게 만들어 보겠습니다. 미리 정의된 CSS 파일을 사용하거나 스타일을 인라인으로 적용할 수 있습니다. 여기서는 CSS 파일을 사용하여 스타일링하겠습니다.

4.1. styles.css 파일 생성

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

button {
    margin: 10px;
    padding: 10px 15px;
    font-size: 16px;
}

4.2. 스타일 적용하기

이제 스타일을 App.js에 불러와서 적용할 수 있습니다:

import React from 'react';
import './styles.css'; // 새로운 CSS 파일을 import
import Counter from './Counter';

function App() {
    return (
        

            
        

    );
}

export default App;

5. 추가 기능 구현

이제 기본 카운터 앱이 완성되었습니다. 다음으로는 사용자가 초기 카운트 값을 설정할 수 있는 기능을 추가해 보겠습니다.

5.1. 초기 카운트 설정 기능

const Counter = () => {
    const [count, setCount] = useState(0);
    const [inputValue, setInputValue] = useState('');

    const increment = () => {
        setCount(count + 1);
    };

    const decrement = () => {
        setCount(count - 1);
    };

    const setInitialCount = (e) => {
        e.preventDefault();
        setCount(Number(inputValue));
        setInputValue('');
    };

    return (
        

            
현재 카운트: {count}

             setInputValue(e.target.value)} />
            
            
            
        

    );
};

위의 코드에서 inputValue 상태를 추가하여 사용자가 숫자를 입력할 수 있도록 했습니다. 초기 값을 설정하는 버튼을 추가했고, 클릭 시 해당 값을 카운트에 적용합니다.

6. 마무리 및 배포

카운터앱의 구현을 마쳤습니다. 이제 애플리케이션을 배포할 준비를 합니다. 기본적인 방법은 두 가지가 있습니다: GitHub Pages 및 Vercel.

6.1. GitHub Pages 배포

  1. 프로젝트를 GitHub에 푸시합니다.
  2. 다음 명령어를 통해 프로젝트를 빌드합니다:
    3. npm run build
  3. 생성된 build 폴더를 GitHub Pages에 호스팅합니다.

6.2. Vercel 배포

  1. Vercel에 가입한 후, GitHub 레포지토리를 연결합니다.
  2. Vercel이 자동적으로 프로젝트를 배포합니다.

결론

이 강좌를 통해 리액트의 기본 개념과 카운터앱을 구현해 보았습니다. 이 과정을 통해 리액트의 상태 관리, 컴포넌트 생성 및 이벤트 처리 방법을 이해하는 데 도움이 되었기를 바랍니다. 이후 더 복잡한 프로젝트에 도전하며 리액트 실력을 키워보세요!

이 글이 유용하셨다면, 블로그를 구독하고 다른 강좌도 확인해보세요!