DDuDu
361
2022-05-28 13:44:15 작성 2022-05-28 13:58:59 수정됨
2
247

React관련질문입니다_진짜 너무 간절해요.. 독학으로하니 미칠 것 같습니다..ㅠ


날씨 API를 이용한 모바일 웹을 만들고있습니다.

openWeather map API ( https://api.openweathermap.org/data/2.5/onecall?lat=11.546755&lon=127.203827&exclude=minutely&appid={API키} 형식으로

lat(x)좌표와lon(y)좌표를 바꿔가며 이용해야하는 API인데요

이런 형식으로 처음에 들어왔을 때 state에 저장된 x,y좌표 값들을 받아와 배열.map()이용해서

element들을 나열 하고싶은데 API를 어떤식으로 끌어와야할지 잘 모르겠어서 질문을 남겨봅니다.



// 시도해보고있는 방법

// 시도중인 방법 (1) 한번에 API를 끌어온다는 생각으로 axios.all이용
let array = new Array();
  array = [
    axios.get(
      "https://api.openweathermap.org/data/2.5/onecall?lat=37.546755&lon=127.203827&exclude=minutely&appid"
    ),
    axios.get(
      "https://api.openweathermap.org/data/2.5/onecall?lat=32&lon=127.203827&exclude=minutely&appid"
    ),
    axios.get(
      "https://api.openweathermap.org/data/2.5/onecall?lat=11.546755&lon=127.203827&exclude=minutely&appid"
    ),
  ];
useEffect(() => {
  axios
    .all(array)
    .then(
      axios.spread((res1, res2, res3) => {
        const ex1 = res1.data;
        const ex2 = res2.data;
        const ex3 = res3.data;
        console.log(ex1, ex2, ex3);
      })
    )
    .catch((err) => console.log(err));
  }, []);
// 위와 같은 방법은 각각 위치의 json이 잘 끌어와 지지만 props를 하나하나 끌어와야하는듯해서
위치를 추가하는 기능을 넣어야하는 부분에서 불가능 할 것 같아
제가 아는 한도에선 불가능한 방법이라고 생각되었습니다.




//시도중인 방법2 배열에 lat,lon값을 배열 내부 object형으로 나타내여 for문으로 API호출 후
bigdata 안에 0번 json 1번 json 2번 json 으로 끌어온 뒤 return 부분에
map함수로 element를 출력 시도한다.

const [array, setArray] = useState([
    {
      lat: 37.5833,
      lon: 126.9778,
    },
    {
      lat: 32.3236,
      lon: 120.8219,
    },
  ]);
const [bigData, setData] = useState([]);

const getfetch = async (x, y) => {
    const json = await (
      await fetch(
        `${baseUrl}lat=${x}&lon=${y}&exclude=minutely&appid=${apiKey}`
      )
    ).json();
    // setData([...json, bigData]);
    setData([json, ...bigData]);
  };

  useEffect(() => {
    for (let i = 0; i < array.length; i++) {
      getfetch(array[i].lat, array[i].lon);
    }
  }, []);

//위와 같은 방법은 for문으로 API를 끌어오는 것이 오류를 일으키는듯해서
제가 아는 한도에서는 이것도 방법이 아닌 것 같았습니다.

혹시 이 글을 보고 답변해주려고하시는분이 제가 쓴 글이 이해가 가지않는다면
그냥 다 빼고 자기 자신이라면 맨 위의 UI처럼 만들려고 하면 이런 방식으로 API를
끌어오는게 아무래도 좋을 것같다고 조언 한번만 부탁드립니다.
정말 간절해요,,, 주변에 물어볼 사람이 아무도 없습니다.
0
  • 답변 2

  • 신동민
    103
    2022-05-28 14:46:28

    https://web.archive.org/web/20210122004654/https://openweathermap.org/current#cities


  • 똥뜨리
    435
    2022-05-28 19:14:11 작성 2022-05-28 19:14:52 수정됨

    const [array, setArray] = useState([
        {
            lat: 37.5833,
            lon: 126.9778,
        },
        {
            lat: 32.3236,
            lon: 120.8219,
        },
    ]);
    const [bigData, setData] = useState([]);
    
    
    useEffect(() => {
        array.forEach(v => {
            fetch(`${baseUrl}lat=${v.lat}&lon=${v.lon}&exclude=minutely&appid=${apiKey}`).then(response => {
                setData(prev => [response,...prev])
            })
        });
    }, []);
    

  • 로그인을 하시면 답변을 등록할 수 있습니다.