[REACT] Ajax로 외부 데이터 통신하기

Ajax 란?

• AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술이다,
• 웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 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로 데이터 처리

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

Axios 설치 
npm install axios

Axios
Promis = 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 규칙

• Async 함수 안에서 Await를 사용
• function 앞에 async 키워드를 추가 함수는 언제나 Promis를 반환한다.
• Return이 Promis라면 Await를 적용하고 then 절을 없앨 수 있다.

비동기에서 세 번의 데이터 통신을 한다고 가정
※ 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);

}