React.js는 자바스크립트를 이용하여 사용자 인터페이스를 만들기 위한 인기있는 프런트엔드 라이브러리입니다. 이 글에서는 React.js를 사용하여 투표 시스템을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

React.js를 사용하기 위해 먼저 프로젝트를 설정해야 합니다. 아래의 명령을 사용하여 React 프로젝트를 생성합니다.

npx create-react-app voting-system

프로젝트가 생성되면 해당 폴더로 이동하여 다음 명령을 실행하여 React 앱을 시작합니다.

cd voting-system
npm start

2. 컴포넌트 생성

React는 컴포넌트 기반으로 작동하기 때문에 투표 시스템을 구현하기 위해 필요한 컴포넌트를 생성해야 합니다. 예를 들어, App.js 컴포넌트에서는 투표를 위한 UI를 렌더링하고, Vote.js 컴포넌트에서는 투표를 처리하는 로직을 작성할 수 있습니다.

// App.js
import React from 'react';
import Vote from './Vote';

const App = () => {
  return (
    <div>
      <h1>투표 시스템</h1>
      <Vote />
    </div>
  );
}

export default App;

// Vote.js
import React, { useState } from 'react';

const Vote = () => {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>현재 투표 수: {count}</p>
      <button onClick={handleVote}>투표하기</button>
    </div>
  );
}

export default Vote;

3. 투표 시스템 구현

위의 코드에서는 Vote.js 컴포넌트에서 투표를 처리하는 로직을 작성했습니다. useState 훅을 사용하여 현재 투표 수를 관리하고, handleVote 함수를 통해 투표 수를 증가시킬 수 있습니다. 이제 App.js 컴포넌트에서 Vote 컴포넌트를 렌더링하고 실제로 투표 기능을 구현할 수 있습니다.

// App.js
import React from 'react';
import Vote from './Vote';

const App = () => {
  return (
    <div>
      <h1>투표 시스템</h1>
      <Vote />
    </div>
  );
}

export default App;

4. 실행

프로젝트의 루트 폴더에서 아래의 명령을 실행하여 React 앱을 시작합니다.

npm start

웹 브라우저에서 http://localhost:3000을 열면 투표 시스템이 동작하는 것을 확인할 수 있습니다.

이제 자바스크립트와 React.js를 이용하여 간단한 투표 시스템을 구현하는 방법에 대해 알아보았습니다. 이러한 기본적인 웹 애플리케이션을 확장하여 다양한 기능을 추가할 수 있습니다.

#React #투표시스템