bumoo king
346
2021-12-25 17:15:03
3
132

Axios 요청 질문입니다 !


function File(){
  let [data,setData] =useState([]);
   useEffect(()=>{
    axiosTest();
  },[data]);
  const axiosTest = ()=>{
    axios.get("https://jsonplaceholder.typicode.com/photos?_start=0&_end=1")
        .then(function(res){
          let copy = [...res.data];
         
          data.push(copy); 1) 이렇게해도
          
          setData(copy); 2) 저렇게해도 data값이 바뀌긴하는데
        })
      }
  return(
    <>
    <h3 >{data[0].title}</h3>
    <img src=""></img>
    </>
  )
}
1) ,2) 으로 해서 콘솔찍으면 data값이 변경되긴합니다만.;
목표는 axios요청해서 state에 집어넣고
필요한곳에 <h3>{ 변수.title }</h3> 해서 데이터바인딩하려는데
title을 쓸수가없다합니다 . .<h3>{ 변수[0].title }</h3>
해도 똑같구요 . . axios 요청시 response.data 에
[ {...} ] 속에 title 있는데 뭐에서 제가 실수한건가요 . .
0
  • 답변 3

  • 푸르게
    679
    2021-12-25 19:06:54

    실행 예제

    import React, { useState, useEffect } from "react";
    import axios from "axios";
    
    // 1. 외부요청은 따로 함수로 빼는 것이 좋습니다.
    // 그러기 위해서는 setData 는 사용하면 안됩니다.
    // then 보다는 async await를 사용하셍요.
    const axiosTest = async () => {
      const res = await axios.get(
        "https://jsonplaceholder.typicode.com/photos?_start=0&_end=1"
      );
      return res.data;
    };
    
    export default function App() {
      let [data, setData] = useState([]);
    
      useEffect(() => {
        (async () => {
          const data = await axiosTest();
          setData(data);
          console.log(data);
        })(); // 3. 임시 비동기 함수 생성후 바로 실행, 내부에서 await 사용.
      }, [setData]); // 2. data가 아니라  setData를 넣아야 합니다.
      // data를 넣을 경우 불필요한 요청이 계속 됩니다.
      // !! data로 변경하고 옆의 console 창을 켜보세요.
    
      return (
        <div className="App">
          {data.map((
            //4. map으로 해야 내부  data가 0개 일때도 에러가 발생하지 않습니다.
            item,
            i
          ) => (
            <div key={i}>
              <h3>{item.title}</h3>
              <img src={item.thumbnailUrl} alt=""></img>
            </div>
          ))}
          {
            /* <h3>{data[0].title}</h3> */
            // 5. 직접 이렇게 적으면 에러가 발생합니다.
            // react component는 내부 상태 변화에 따라 자동을 rerendering을 합니다.
            // 즉, 처음 들어올 때는 data = [] 비어 있습니다.
            // 따라서 data[0] 접근하면 에러가 발생합니다.
            // 추후 데이터를 요청하고 setData(data)로 값을 수정했을 때
            // component 는 새로운 data에 맞춰 rerendering을  합니다.
            // 이 때서야 data[0]에 접근이 가능하겠지요.
            // 따라서, 4 번 처럼 map으로 해야 합니다.
          }
        </div>
      );
    }
    


  • bumoo king
    346
    2021-12-25 23:32:28

    와 . . .진짜 . . 밥사드리고싶네요 . . 너무감사합니다 . .진심 코카콜라보다 속시원하게이해시켜주시고

    좋은 조언까지 너무 감사드립니다 이럴수가 . .

  • bumoo king
    346
    2021-12-26 00:09:29
     useEffect(()=>{
     ()로async를감싸신이유를알수있나요?->(async () =>{
          const data = await axiosTest();
          setData(data);
          console.log(data);
        })(); <- 요기 빈소괄호()도 궁금합니다 . .
      },[setData]);


    ------------------------------------------------------
    useEffect(()=>{
        (async () =>{
          const data = await axiosTest();
          setData(data);
          console.log(data.title);<-data.title 하면왜undefined
                                                                라고 나오나요 . .? data 는 되는데 바로data.title 은 하면안되나요?
        })();
      },[setData]);
  • 로그인을 하시면 답변을 등록할 수 있습니다.