[React] Ajax (외부 데이터 통신)

🔵 React

[React] Ajax (외부 데이터 통신)

HYEJU01 2024. 8. 31. 01:21

Ajax ?

AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다.

웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 됩니다.
이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됩니다.
비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 됩니다.
나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있습니다.

ES6 fetch 를 이용해 데이터 처리 (리액트)

Promise = fetch(요청주소)

📍 이벤트 클릭시 처리하기

데이터를 가져와서 useState()에 저장하는 작업입니다.
극단적으로 표현해 데이터 통신에 100초 가 소요되면 useState는 100초 간 undefined 상태가 됩니다.
렌더링 시에 에러를 나타내기 때문에, undefined에 관한 처리를 동시에 진행합니다.

import { useEffect, useState } from "react";

const App = () => {

    let [raw, setRaw] = useState();

    const handleClick = () => {
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then( response => response.json() )
        .then( data => {
						//console.log(data)
            setRaw(data)
        })
    }

    return (
        <div>
            <h3>클릭시에 fetch로 데이터 가져오기</h3>
            <button type="button" onClick={handleClick}>데이터로드</button>
            {raw !== undefined ?
                <div>
                    {raw.userId}<br />
                    {raw.userPw}<br />
                    {raw.userName}<br />
                </div>
                : undefined
            }
        </div>
    )

}

export default App;

📍화면 렌더링 완료시 데이터 처리하기 useEffect() 훅 사용

비동기 작업을 컴포넌트에 바로 쓰고 state를 변경하면, 무한루프에 빠지게 됩니다.
그래서 useEffect() 훅을 이용하여 첫번째 렌더링 완료시만 데이터만 가져오도록 처리합니다.

import { useEffect, useState } from "react";

const App = () => {

    let [data, setData] = useState()

		//렌더링 완료시 데이터 로드
    useEffect( () => {
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then( response => response.json() )
        .then( data => {
            setData(data)
        })
    }, [])



    return (
        <div>
            <h3>로딩시에 fetch로 데이터 가져오기(같은표현)</h3>
            {data && <div>
                        {data.userId}<br />
                        {data.userPw}<br />
                        {data.userName}<br />
                    </div>
            }
        </div>
    )

}

export default App;

Axios 로 데이터 처리

엑시오스는 비동기를 더편하게 처리하는 라이브러리 입니다.

엑시오스 설치

npm install axios

엑시오스

Promise = axios.get(요청주소)

📍 이벤트 클릭시 처리하기 (fetch와 거의 같음 😊)

import axios from "axios";
import { useState } from "react";

const App = () => {

    const handleClick = () => {
        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then(response => {
            setData( response.data );
        })
    }

    return (
        <div>
            <h3>엑시오스데이터</h3>
            <button type="button" onClick={handleClick}>데이터로드</button>
            {data !== undefined ?
                <div>
                    {data.userId}<br />
                    {data.userPw}<br />
                    {data.userName}<br />
                </div>
                :
                undefined
            }
        </div>
    )
}
export default App;

async , await 적용

비동기 코드를 간결하게 작성할 수 있게 합니다. ( async(이거 비동기임) , await(기다려))

📍 async, await규칙

어싱크 함수 안에서 어웨잇을 사용한다
function 앞에 async 키워드를 추가 함수는 언제나 프로미스를 반환합니다.
리턴이 프로미스라면 await을 적용하고 then절을 없앨 수 있다.

😺비동기에서 3번의 데이터 통신을 한다고 가정합시다.

1,2,3,4,5,6의 순서로 출력될 것 같지만 아닙니다.

순서를 보장하지 않습니다.

    ...생략
    const handleClick = () => {
        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then(response => {
            console.log(response.data);
            console.log(1)
        })
        console.log(2)

        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')
        .then(response => {
            console.log(response.data);
            console.log(3)
        })
        console.log(4)

        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
        .then(response => {
            console.log(response.data);
            console.log(5)
        })
        console.log(6)
    }

Axios는 이미 Promise를 반환합니다.
Axios앞에 await을 사용할 수 있고, then() 절을 생략 할 수 있습니다.
Axios를 호출하는 부모함수에는 await을 반드시 달아줍니다.

📍 async, await의 장점

코드의 간결성
어싱크, 어웨잇은 동기적방식(순서를) 보장한다

📍 async, await적용하여 변경하기

const handleClick = async () => {
    let response = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    console.log(response.data);
    setData( response.data );

    console.log(1);

    let response2 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')
    console.log(response2.data);

    console.log(2);

    let response3 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
    console.log(response3.data);

    console.log(3);

}

📍 useEffect에서 async, await쓰기

useEffect(() => {
    
    (async () => {
        let url = '주소';
        let response = await axios.get(url);
				//state업데이트
    })();


}, []);

import axios from "axios";
import { useEffect } from "react";

function App() {

  const handleClick = async () => {

    // //비동기 방식에서 데이터의 순서를 보장받고 싶다면, 이렇게 작성해야 합니다.
    // axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    // .then(response => {
    //   console.log(response.data);
    //   console.log(1);

    //   axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')
    //   .then(response => {
    //     console.log(response.data);
    //     console.log(3);

    //     axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
    //     .then(response => {
    //       console.log(response.data);
    //       console.log(5);
    //     });
    //   });
    // });

    //async(이거 비동기야), await(그러니까 기다려)
    //1. async함수 안에서만 await키워드를 쓸수 있음.
    //2. 만약 function앞에 async를 붙이면 언제나 Promise객체를 반환함
    //3. 함수의 리턴이 Promise라면 await키워드를 붙이고 then을 생략할 수 있음

    //장점
    //1. 코드가 간결해짐
    //2. 수행방식을 동기방식으로 바꾸면서, 순서 보장이 들어감.
    // const data1 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')

    // console.log(data1.data);
    // console.log(1);
    // const data2 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')

    // console.log(data2.data);
    // console.log(2);
    // const data3 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
    
    // console.log(data3.data);
    // console.log(3);

    // const result = await fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    //                       .then(response => response.json() )
    // console.log(result);
   }


  //실습 - 힌트는 저의 강의자료에 있을거에요 아마
  //화면 로드시에 hi.json데이터를 async, await으로 가져오는 프로그램 코드를 작성해 보세요.

 
  // useEffect(() => {

  //   (async () => {
  //     const result = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json');
  //         console.log(result);
  // }) ();
  // }, []);




  return (
    <>
      <h3>엑시오스로 데이터 받기</h3>

      <button onClick={handleClick}>클릭시 네트워크통신으로 데이터 가져오기</button>

      

    </>
  )

}
export default App;

  const handleClick = async () => {

    //비동기 방식에서 데이터의 순서를 보장받고 싶다면, 이렇게 작성해야 합니다.
    axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    .then(response => {
      console.log(response.data);
      console.log(1);

      axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')
      .then(response => {
        console.log(response.data);
        console.log(3);

        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
        .then(response => {
          console.log(response.data);
          console.log(5);
        });
      });
    });

....

  //async(이거 비동기야), await(그러니까 기다려)
    //1. async함수 안에서만 await키워드를 쓸수 있음.
    //2. 만약 function앞에 async를 붙이면 언제나 Promise객체를 반환함
    //3. 함수의 리턴이 Promise라면 await키워드를 붙이고 then을 생략할 수 있음

    //장점
    //1. 코드가 간결해짐
    //2. 수행방식을 동기방식으로 바꾸면서, 순서 보장이 들어감.
    const data1 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')

    console.log(data1.data);
    console.log(1);
    const data2 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')

    console.log(data2.data);
    console.log(2);
    const data3 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
    
    console.log(data3.data);
    console.log(3);

    const result = await fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
                          .then(response => response.json() )
    console.log(result);

  useEffect(() => {

    (async () => {
      const result = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json');
          console.log(result);
  }) ();
  }, []);

저작자표시 비영리 변경금지

현재글[React] Ajax (외부 데이터 통신)

개발일지📝

[React] Ajax (외부 데이터 통신)

Ajax ?

ES6 fetch 를 이용해 데이터 처리 (리액트)

Axios 로 데이터 처리

async , await 적용

'🔵 React'의 다른글

티스토리툴바

[React] Ajax (외부 데이터 통신)

Ajax ?

ES6 fetch 를 이용해 데이터 처리 (리액트)

Axios 로 데이터 처리

async , await 적용

'🔵 React'의 다른글

관련글

티스토리툴바