자바스크립트와 React.js를 활용한 세계 시간 애플리케이션 만들기

09 Nov 2023

reactjs

React.js는 최근 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다. 이번 포스트에서는 React.js를 사용하여 세계 시간 애플리케이션을 만드는 방법을 알아보겠습니다. 이 애플리케이션은 사용자의 현재 위치를 기준으로 세계의 다양한 도시들의 시간을 실시간으로 표시하는 기능을 제공합니다.

프로젝트 구조

먼저, 프로젝트를 설정하기 위해 다음과 같은 구조를 가진 디렉토리를 생성합니다:

├── src
│   ├── components
│   │   ├── Clock.js
│   │   ├── CitySelector.js
│   ├── App.js
│   ├── index.js

src 디렉토리: 프로젝트의 모든 소스 코드를 포함하는 디렉토리입니다.
components 디렉토리: React 컴포넌트를 저장하는 디렉토리입니다.
Clock.js: 도시별 시간을 표시하는 컴포넌트입니다.
CitySelector.js: 사용자가 선택할 수 있는 도시 목록을 표시하는 컴포넌트입니다.
App.js: 메인 앱 컴포넌트입니다.
index.js: 앱을 렌더링하는 진입점입니다.

세계 시간 애플리케이션 만들기

Clock.js 컴포넌트를 작성합니다. 이 컴포넌트는 주어진 도시의 현재 시간을 표시합니다. 이를 위해 moment.js 라이브러리를 사용할 수 있습니다.

import React from 'react';
import moment from 'moment';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: moment().tz(this.props.city.timezone).format('HH:mm:ss'),
    };
  }

  componentDidMount() {
    this.intervalID = setInterval(() => {
      this.setState({
        time: moment().tz(this.props.city.timezone).format('HH:mm:ss'),
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

  render() {
    return (
      <div>
        <h2>{this.props.city.name}</h2>
        <p>{this.state.time}</p>
      </div>
    );
  }
}

export default Clock;

CitySelector.js 컴포넌트를 작성합니다. 이 컴포넌트는 사용자에게 도시를 선택할 수 있는 드롭다운 목록을 제공합니다.

import React from 'react';

class CitySelector extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.props.onCityChange(event.target.value);
  }

  render() {
    return (
      <select onChange={this.handleChange}>
        <option value="">Select a city</option>
        <option value="Asia/Seoul">Seoul</option>
        <option value="America/New_York">New York</option>
        <option value="Europe/London">London</option>
      </select>
    );
  }
}

export default CitySelector;

App.js 컴포넌트를 작성합니다. 이 컴포넌트는 Clock.js와 CitySelector.js를 조합하여 애플리케이션의 메인 기능을 구현합니다.

import React from 'react';
import Clock from './components/Clock';
import CitySelector from './components/CitySelector';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCity: '',
    };
    this.handleCityChange = this.handleCityChange.bind(this);
  }

  handleCityChange(city) {
    this.setState({
      selectedCity: city,
    });
  }

  render() {
    return (
      <div>
        <h1>World Clock</h1>
        <CitySelector onCityChange={this.handleCityChange} />
        {this.state.selectedCity && (
          <Clock city={this.state.selectedCity} />
        )}
      </div>
    );
  }
}

export default App;

index.js 파일에서 앱을 렌더링하는 설정을 추가합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

프로젝트 루트 디렉토리에서 npm install 명령을 사용하여 필요한 종속성을 설치합니다.
npm start 명령을 사용하여 앱을 실행합니다.

결론

이 튜토리얼에서는 React.js와 자바스크립트를 사용하여 세계 시간 애플리케이션을 만드는 방법을 알아보았습니다. React.js를 사용하면 사용자 인터페이스를 구축하기 위한 강력한 도구를 활용할 수 있습니다. 나아가 이 예제를 확장하여 다양한 기능을 추가해보세요. Happy coding!

#ReactJS #JavaScript