React.js는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 타이머 애플리케이션과 같은 동적인 요소를 쉽게 구현할 수 있습니다. 이번 포스트에서는 React.js를 사용하여 타이머 애플리케이션을 제작하는 방법에 대해 알아보겠습니다.

1. 프로젝트 세팅

먼저 React.js 프로젝트를 설정해야 합니다. 프로젝트 폴더를 생성한 다음, 터미널을 열고 해당 폴더로 이동합니다. 아래 명령어를 실행하여 React 앱을 생성합니다.

npx create-react-app timer-app

프로젝트가 생성되면 해당 폴더로 이동하여 다음 명령어를 실행하여 React 개발 서버를 실행합니다.

cd timer-app
npm start

2. 타이머 컴포넌트 생성

타이머를 구현하기 위해 Timer 컴포넌트를 생성합니다. src 폴더 안에 Timer.js 파일을 생성하고, 아래 코드를 작성합니다.

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

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

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

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

  return (
    <div>
      <h1>타이머 애플리케이션</h1>
      <p>경과한 시간: {seconds} 초</p>
    </div>
  );
}

export default Timer;

위 코드에서는 useState 훅을 사용하여 seconds 상태 변수를 선언하고, useEffect 훅을 사용하여 1초마다 seconds 값을 증가시키는 기능을 추가했습니다.

3. 앱 컴포넌트 수정

이제 생성한 타이머 컴포넌트를 앱 컴포넌트에 추가합니다. src 폴더 안에 있는 App.js 파일을 열고, 아래 코드로 수정합니다.

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

function App() {
  return (
    <div>
      <Timer />
    </div>
  );
}

export default App;

4. 앱 실행

이제 개발 서버를 재시작하고, 브라우저에서 http://localhost:3000로 접속합니다. 타이머 애플리케이션이 잘 동작하는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 React.js를 사용하여 타이머 애플리케이션을 제작하는 방법에 대해 알아보았습니다. React.js를 활용하면 동적인 요소를 쉽게 구현할 수 있으며, 이는 사용자 경험을 향상시키는 데 도움이 됩니다.

#React #타이머