9. Ajax로 외부 데이터 통신하기

목차

1. Ajax란?
2. ES6의 fetch를 이용해서 리액트에서 데이터 처리하기
3. Axios로 데이터 처리하기 
4. async, await 적용하기

 

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

 

ajax

웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 됩니다.

이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됩니다.

비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 됩니다.

 

나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있습니다.

 

---

ES6의 fetch를 이용해서 리액트에서 데이터 처리하기

Promise = fetch(요청주소)

 

1. 이벤트 클릭시 처리하기

• 데이터를 가져와서 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;

---

2. 화면 렌더링 완료시 데이터 처리하기 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 add axios

엑시오스

Promise = axios.get(요청주소)

 

1. 이벤트 클릭시 처리하기 (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(기다려) 적용하기

ES6의 문법입니다. 비동기 코드를 간결하게 작성할 수 있게 합니다.

 

구문의 내용을 잘모르거나 궁금하면 여기로
https://coding404.tistory.com/21

 

async, await규칙

1. 어싱크 함수 안에서 어웨잇을 사용한다
2. function 앞에 async 키워드를 추가 함수는 언제나 프라미스를 반환합니다.
3. 리턴이 프로미스라면 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의 장점

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

 

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);

}