이번에 프로젝트를 진행하면서 날씨를 불러올 일이 생겼다. 그래서 이 부분에 대해 공부를 진행했고, 이에 대해 정리하려고 한다.
본인이 썼던 API는 https://openweathermap.org 의 API를 사용했다.
우선 가장 궁금해할 사용방법에 대해 알아보자.

API 사용준비

첫번째로 사이트에서 API_Key 를 가져와야 한다.

https://openweathermap.org

위의 링크를 타고 들어가서 회원가입을 우선 진행하자. 그리고 오른쪽 위에 자기 닉네임을 눌러서 My API Keys에 들어가자. 그 후에 API를 가져오면 된다.

이렇게 API KEY 가 준비되었다면 React 파일로 넘어가자.

API_KEY는 꼭 .env파일에 저장...

우선 우리가 불러올 파일에 가서 API키를 입력해도 좋지만, 다른 파일에서도 이를 쓸 수 있다면 .env 파일에 이를 저장해두는 것을 추천한다.

본인도 위 파일에 API_KEY를 저장해두었다. 이 이유는 다른 파일에서도 쉽게 쉽게 쓸려고 하는 것도 있지만, 이 파일을 github에 올려둘때 문제가 된다. 이 키를 다른 사람들이 모두 쓰게 되면 돈이 무지막지 하게 나올 수 있다.
.env 파일은 github에 올라가지 않아 이러한 상황을 방지할 수 있다.

공짜로 제공받은 API키라고 하더래도 .env 파일을 만들어서 이곳에 두자.
아래와 같이 파일에 두고 진행해보자.

REACT_APP_WEATHER_KEY= 제공 받은 API_KEY

API 사용

우선 코드를 하나씩 봐보자.

상태 변수 정의

constructor(props) {
    super(props);
    this.state = {
      temp: 0,
      temp_max: 0,
      temp_min: 0,
      humidity: 0,
      desc: '',
      icon: '',
      loading: true,
    };
  }

이 코드는 우리가 알고 싶은거를 변수로 생성해둔다.
위에 API키를 불러오면 이후에 보여주겠지만, 많은 날씨 정보를 제공해준다. 이때 필요한 것을 저장할 변수를 생성해두는 단계이다.

날씨 조회

이 단계에서 본격적으로 API 키를 axios 를 통해 값을 불러오기 시작한다.
불러올 도시 이름을 cityName에 적고 apiKey를 연결한다.
그 후에 콘솔로 값을 찍어보고 원하는 값을 위에 정해준 상태 변수에 전달해준다.

 componentDidMount() {
    const cityName = 'Incheon';
    const apiKey = process.env.REACT_APP_WEATHER_KEY;
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`;

    //위에서 만든 상태 변수에 값을 전달
    axios
      .get(url)
      .then((responseData) => {
        console.log(responseData);
        const data = responseData.data;
        this.setState({
          temp: data.main.temp,
          temp_max: data.main.temp_max,
          temp_min: data.main.temp_min,
          humidity: data.main.humidity,
          desc: data.weather[0].description,
          icon: data.weather[0].icon,
          loading: false,
        });
      })
      .catch((error) => console.log(error));
  }

한번 콘솔창에 찍어본 결과를 보자.
만약에 Axios연결 잘 되었다면 아래와 같이 콘솔이 찍히는 것을 볼 수 있다. 좀 더 데이터를 보기 위해 자세히 들어가보자.

아래를 보면 체감온도, 최대온도, 최소온도, 기압 등등 여러 정보들이 나온다. 이를 아까처럼 상태변수에 넣어주면 된다.

날씨 정보 출력(컴포넌트에서 이용)

이제는 상태변수에 원하는 값을 담았다면 컴포넌트에서 값을 보여줄 차례이다.
render함수를 통해 아래와 같이 나타낸다.
아래 처럼 위에 선언했던 변수를 원하는 곳에 집어 넣으면 된다.
하나 주의 했으며 하는 점이 여기서의 온도는 켈빈 기준이다. 그래서 우리가 자주 쓰는 화씨온도는 -273.15를 해주어야 한다. 온도가 200을 넘게 나와도 이상하게 나오는 것이 아니라,이 부분을 계산해주면 된다. 본인도 이 부분 때문에 뭔가 잘못하고 있다고 한참 걱정했다...

render() {
    const imgSrc = `https://openweathermap.com/img/w/${this.state.icon}.png`;
  //값을 받아오기 전 보여줄 화면 
    if (this.state.loading) {
      return <p>Loading</p>;
    } 
  // 값을 받아오고 나서 보여줄 화면
    else {
      return (
        <MaxMin>
              최고: {(this.state.temp_max - 273.15).toFixed(0)}° 
        	  최저: {(this.state.temp_min - 273.15).toFixed(0)}°
        </MaxMin>
      );
    }

총 정리 코드

본인이 썼던 프로젝트에서 썼던 코드이다. 아래 컴포넌트 같은 것은 이전에 styled-component 로 만들어서 썼던 것이니 코드를 참고할때 이 부분을 수정바란다.

class Weather extends Component {
  // 상태 변수 정의
  constructor(props) {
    super(props);
    this.state = {
      temp: 0,
      temp_max: 0,
      temp_min: 0,
      humidity: 0,
      desc: '',
      icon: '',
      loading: true,
    };
  }
  // 컴포넌트 생성 후 날씨 정보 조회
  componentDidMount() {
    const cityName = 'Incheon';
    const apiKey = process.env.REACT_APP_WEATHER_KEY;
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`;

    //위에서 만든 상태 변수에 값을 전달
    axios
      .get(url)
      .then((responseData) => {
        console.log(responseData);
        const data = responseData.data;
        this.setState({
          temp: data.main.temp,
          temp_max: data.main.temp_max,
          temp_min: data.main.temp_min,
          humidity: data.main.humidity,
          desc: data.weather[0].description,
          icon: data.weather[0].icon,
          loading: false,
        });
      })
      .catch((error) => console.log(error));
  }
  // 날씨 정보 출력
  render() {
    const imgSrc = `https://openweathermap.com/img/w/${this.state.icon}.png`;
    if (this.state.loading) {
      return <p>Loading</p>;
    } else {
      return (
          <Wrapper>
            <SpaceAround>
              <div>
                <TemperText>{(this.state.temp - 273.15).toFixed(0)}°</TemperText>
              </div>
              <WeatherWrapper>
                <ImgFlex>
                  <WeatherImg src={imgSrc} />{' '}
                </ImgFlex>
                <WeatherText>{this.state.desc}</WeatherText>
              </WeatherWrapper>
            </SpaceAround>

            <Margin height='10' />
            <SpaceAround>
              <MaxMin>
                최고: {(this.state.temp_max - 273.15).toFixed(0)}° 최저: {(this.state.temp_min - 273.15).toFixed(0)}°
              </MaxMin>
              <HumidityText>
                <SlDrop size='17px' style={{ marginTop: '7px', marginRight: '8px' }} />
                {this.state.humidity}
              </HumidityText>
            </SpaceAround>
          </Wrapper>

      );
    }
  }
}

export default Weather;

이러한 과정을 통해 아래와 같이 예쁜 날씨창이 생성이 가능하다.

이번 블로깅에서는 날씨 API를 가져와서 쓰는 방법에 대해 알아보았다. 사실 본인이 설명한 것 이외에 아이콘을 직접 정해주는 것도 있고, 본인이 쓴 정보 이외에도 많은 양의 정보를 제공해준다. 이 부분도 이후에 다른 프로젝트에서 적용해볼 예정이다.