Axios_TIL(48)

리액트를 공부하면 할 수록 어렴풋이 알고 지나갔던 것들이 부메랑🪃처럼 되돌아 오고 있다.

그래서 오히려 좋다👍는 마인드로 하나씩 다시 열심히 리마인드를 하고 있다.

오늘의 주제는 Axios다. 프로젝트할 때 axios를 사용해서 json-server에서 db에서 데이터를 가져왔었는데 그 때는 급한마음에 갖다 썼지만 지금은 다음 프로젝트를 위해서 공부했다.

이 때까지 하나씩 야금야금 공부했던 useEffect , async & await , promise.then() 등이 합쳐져서 완성본을 이룬 느낌이다.

---

axios는 비동기 통신이다. 데이터값이 언제 들어올지 각각 다 다르니까 이렇게 사용한다.

데이터를 가져온다는 예시로 axios.get("localhost:주소")일때 -->await axios.get("localhost:주소")를 사용한다.

await는 주소를 가져올때까지 기다려줘, 즉 이 코드가 실행될때까지 멈춘다라는 기능을 가지고 있다.

그렇게 되면 이 다음 코드들은 무조건 값을 가지게 되는 것이다.(그래서 .then()이라는게 굳이 필요가 없다고 하는 듯)

 

❓그럼 async + await 코드는 언제 쓸까  : 화면이 렌더링되었을 때
❓그럼 화면이 렌더링 되자마자 어떻게 실행 시킬까 : useEffect(()=>{},[])

//화면이 렌더링될떄 사용

useEffect(()=>{
  const fetchData=async()=>{
    await axios.get("주소") // 2.데이터를 가져올떄까지 wait
  }
  fetchData()  // 1.실행
},[])  //렌더링될때 한번만 실행

그래서 이 위의 코드로 데이터를 가져와서 state 값을 어떻게 변화 줄까?🧐

//위에꺼 정리해보면
const [todos,setTodos]=useState([])
useEffect(()=>{
  const fetchData=async()=>{
    const response = await axios.get("주소")
    setTodos(response.data)  //필요한 배열을 가져와서 setTodo해준다.
    }
  fetchData()
},[])

reponse.data --> 가져온 데이터들이 담겨있는 배열들

---

그럼 비동기안의 코드들은 왜 순차적으로 진행이 될 수 있을까? 라는 의문이 들 수 있다.

<두 가지가 있다>

1.await 때문에 : 값이 들어오기전까지 진행을 멈춰놓고 값이 들어오면 진행이 되기 때문에

2.비동기통신의 return 값은 Promise객체다.🔥

axios.get("주소").then(()=>{성공했으면 실행}
   ).catch(()=>{error났을떄 실행 될 코드})
     ).finally(그냥 실행이 되면 뜨는 거)

객체를 안의 값을 부를때 fruit.red라고 키 값을 .찍고 호출하면 apple 이런식으로 value가 나오듯이

즉, axios에서 반환된 값이 Promise객체이므로 Promise안에있는 .then / .catch / .finally 을 호출 할 수 있다.

그래서 진행을 순차적으로 할 수 있다.

---

그 동안 하나하나씩 공부했던것이 이렇게 연결되어서 사용이 되니까 좀 더 재밌게 이해되었다.

좀 더 코드를 잘 이해할 수 있을 것 같은 느낌이 든다. 내 착각일수도ㅎ

어쨌든 오늘의 TIL 끝😎