자바스크립트/React

[React] 기본 get 통신

KIMJAVAN 2024. 4. 1. 15:17
728x90
  async function getData() {
    try {
      const {data} = await api.get(`경로`)  // 경로로 get을 해온 후 data에 할당한다 * 비동기 통신
      setProductData(data); // data로 불러온 것을 set 해준다 **set은 useState로 따로한다
    }catch (e) { // 오류가 생기면
      console.error(e); // 콘솔에 오류를 출력한다
    }
  }

 

getData는 의도대로 버튼을 눌러서 onClick 이벤트로 만들거나 useEffect 를 사용해서 불러오기를 한다 

useEffect를 사용하면 페이지가 랜딩되면 실행되고 onClick 이벤트를 사용하면 사용자가 이벤트를 발생시키는 타이밍에 해당 함수를 작동시킬 수 있다