Reactjs를 사용하여 GPS 위치 관제

1. React 앱 생성 – Create React App을 사용하여 React 앱을 생성합니다.
2. Geolocation API 사용 – 웹 브라우저에서 제공하는 Geolocation API를 사용하여 사용자의 위치를 가져옵니다.
3. 위치 정보 렌더링 – 가져온 위치 정보를 React 컴포넌트에 렌더링합니다.
4. 이벤트 리스너 – 사용자의 위치가 변경될 때마다 이벤트 리스너를 통해 새로운 위치 정보를 가져옵니다.

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

function App() {
  const [location, setLocation] = useState({});

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        });
      },
      (error) => console.log(error)
    );
  }, []);

  return (
    <div>
      <h1>Latitude: {location.latitude}</h1>
      <h1>Longitude: {location.longitude}</h1>
    </div>
  );
}

export default App;

navigator.geolocation.getCurrentPosition 함수를 사용하여 사용자의 현재 위치를 가져옵니다. 이 함수는 성공적으로 위치를 가져왔을 때는 첫 번째 인자로 전달된 콜백 함수를 호출하며, 실패하면 두 번째 인자로 전달된 콜백 함수를 호출합니다.

위 코드를 참고하여 자신의 앱에 맞게 수정하시면 될 것입니다.