React.js로 구현한 타이머 애플리케이션 제작 방법

09 Nov 2023

reactjs

이번 포스트에서는 React.js를 사용하여 간단한 타이머 애플리케이션을 구현하는 방법을 알아보겠습니다.

1. 프로젝트 설정

먼저, React.js 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다. 다음 명령어를 터미널에서 실행하여 시작합니다:

npx create-react-app timer-app
cd timer-app

2. 컴포넌트 구성

애플리케이션에는 타이머를 표시하는 Timer 컴포넌트와 시작/일시정지 버튼을 포함하는 Controls 컴포넌트가 있습니다. 구성을 위해 src 폴더에 Timer.js와 Controls.js 파일을 생성합니다.

Timer.js

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div>{seconds}초</div>;
};

export default Timer;

Timer 컴포넌트는 초를 나타내는 seconds 상태 변수를 사용합니다. useEffect 훅을 사용하여 1초마다 setSeconds 함수를 호출하여 초를 증가시킵니다. useEffect의 두 번째 인자로 빈 배열을 전달하여 컴포넌트가 처음 마운트될 때에만 타이머를 시작하도록 설정합니다. 마운트 해제 시에는 clearInterval 함수를 호출하여 타이머를 정리합니다.

Controls.js

import React, { useState } from 'react';

const Controls = () => {
  const [isRunning, setIsRunning] = useState(false);

  const handleToggle = () => {
    setIsRunning(prevIsRunning => !prevIsRunning);
  };

  return (
    <div>
      <button onClick={handleToggle}>{isRunning ? '일시정지' : '시작'}</button>
    </div>
  );
};

export default Controls;

Controls 컴포넌트는 isRunning 상태 변수를 사용하여 시작/일시정지 상태를 관리합니다. handleToggle 함수를 통해 isRunning 상태를 토글하고, 버튼의 텍스트를 상태에 따라 변경합니다.

3. 애플리케이션 조립

이제 src/App.js 파일에서 Timer와 Controls 컴포넌트를 가져와 조립합니다.

import React from 'react';
import Timer from './Timer';
import Controls from './Controls';

const App = () => {
  return (
    <div>
      <Timer />
      <Controls />
    </div>
  );
};

export default App;

4. 애플리케이션 실행

모든 구성 요소가 완료되었습니다. 터미널에서 다음 명령어를 실행하여 애플리케이션을 실행합니다:

npm start

브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있습니다. 타이머가 시작되고, 시작/일시정지 버튼을 클릭하여 타이머를 제어할 수 있습니다.

이제 React.js를 사용하여 타이머 애플리케이션을 개발하는 방법을 알게 되었습니다. 이 예제를 통해 React.js에서 상태 관리와 훅을 활용하는 방법을 익힐 수 있습니다. 추가로 UI를 개선하거나 타이머 기능을 확장할 수 있는 여지가 있습니다. 알림 기능이나 멈춤/초기화 버튼 등을 추가해보세요!

참조

React 공식 문서: https://reactjs.org/
Create React App: https://create-react-app.dev/docs/getting-started/

#react #javascript