# All files / src/chap06 QueryPre.js

60.86% Statements 14/23
16.66% Branches 1/6
62.5% Functions 5/8
60% Lines 12/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

    1x

    1x

    1x
    1x

    1x
    1x
    1x

    1x
    1x
    1x

    1x
    1x

     import { useEffect, useState } from 'react';

    // delay 초 동안 처리를 일시 정지하는 sleep 함수
    const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

    // 날씨 정보를 얻기 위한 함수
    const fetchWeather = async () => {
      // 처리 지연을 위한 더미 휴지 처리
      await sleep(2000);
      const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Seoul&lang=ko&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`);
      if (res.ok) { return res.json(); }
      // 오류 발생 시 해당 내용을 슬로우
      throw new Error(res.statusText);
    };

    export default function QueryPre({ id }) {
      // 날씨 정보(info), loading(로딩 중인가?), error(오류 정보) 준비 error(오류 정보) 준비
      const [data, setData]  = useState(null);
      const [isLoading, setLoading] = useState(true);
      const [error, setError] = useState('');

      // 컴포넌트 실행 시 날씨 정보 획득
      useEffect(() => {
        setLoading(true);
        fetchWeather()
          // 성공 시 정보 업데이트
          .then(result => setData(result))
          // 실패 시 error 업데이트
          .catch(err => setError(err.message))
          // 성공 여부와 상관없이 isLoading 업데이트
          .finally(() => setLoading(false));
      }, []);

      // 로딩 중이라면 로딩 메시지 표시
      Eif (isLoading) {
        return <p>Loading...</p>;
      }

      // 통신 오류 발생 시 오류 메시지 표시
      if (error) {
        return <p>Error: {error}</p>;
      }

      // 로딩 중이거나 오류가 아닌 경우 결과 표시
      return (
      <figure>
        <img
        src={`https://openweathermap.org/img/wn/${data?.weather?.[0]?.icon}.png`}
        alt={data?.weather?.[0]?.main} />
        <figcaption>{data?.weather?.[0]?.description}</figcaption>
      </figure>
      );
    }