티스토리 뷰

React.js

23-01-20) 9. Ajax로 외부 데이터 통신하기

JadeStone 2023. 1. 20. 16:07

목차

  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(요청주소)

*주의!

비동기 작업을 컴포넌트에 바로 쓰고 state를 변경하면, 무한루프에 빠지게 됩니다.

 

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

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

const App = () => {

    /*
    Ajax를 이용해서 외부데이터 가져오기
    1. Promise = fetch().
    */

    const[raw, setRaw] = useState();

    const handleClick = () => {
    
    fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    .then( response  => response.json())
    .then(data => setRaw(data)) // 이벤트 밖에서 절대 이렇게 하면안됨. 무한루프 돎.
    
    }

    console.log(raw);

    return (
        <Fragment>

            <button onClick={handleClick}>데이터가져오기</button>

            {
                raw === undefined ?
                "데이터 준비중"
                :
                <div>
                    아이디:{raw.userId}<br/>
                    PW: {raw.usePw}<br/>
                    이름: {raw.userName}<br/>
                </div>
            }

        </Fragment>
    )

}

export default App;

 

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

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

    useEffect(() => {
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then(response => response.json())
        .then(data => setData(data) )
    },[])
    
    
    	return(
                <h3>mount이후 데이터 가져오기</h3>
            {  // 이 구문은 data 값이 undefinded 이면 false로 판단해서 값을 안 보여주고,
               // 값이 있다면 && 뒤에 구문을 보여준다.
                data && <div>
                    아이디:{data.userId}
                    Pw:{data.userPw}
                    이름:{data.userName}
                </div>
            }
            
            )

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------

 

# fetch함수와 promise 객체 돌아가는 원리를 알고싶다면 아래 주소로.
https://jadestone.tistory.com/84

 

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://jadestone.tistory.com/84

 

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를 호출하는 부모함수에는 async 을 반드시 달아줍니다.

 

async, await의 장점

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

async, await적용하여 변경하기

import axios from "axios"
import { Fragment, useState } from "react"

const App = () => {

    /*
    p.356
    
    -Axios는 비동기를 편하게 처리하는 라이브러리 입니다 (fetch로 사용해도 무방합니다)
    -설치 npm add axios
    -Axios는 get(), post()함수를 제공하고, 사용했을때 리턴은 Promise
    */


   const [data, setData] = useState();

   //async await의 장점
   //1. 코드가 간결해집니다.
   //2. 동기적인 호출방식을 보장해줍니다.
   const handleClick = async () => {
        let result = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json');
        console.log(result.data);

        console.log(1);

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

        console.log(2);

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

        console.log(3);
   }
   
   /*     
    //순서를 보장받고 싶다면 ?
    const handleClick = () => {
        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/by.json')
            .then(response => {
                console.log(response.data) 
                console.log(3);

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

            });

        });

    } */

    
    //순서를 보장하지 않음
    
    // const handleClick = () => {
    //     axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    //     .then(response => {
    //         console.log(response.data) 
    //         console.log(1);
    //         /* setData(response.data) */
    //     });

    //     console.log(2);

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

    //     console.log(4);

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

    //     console.log(6);
    // }
    

    return (
        <Fragment>
            <h3>엑시오스로 데이터 가져오기</h3>

            <button onClick={handleClick}>데이터가져오기</button>

            {
                data && <div>
                    아이디: {data.userId}<br/>
                    PW: {data.userPw}<br/>
                    이름: {data.userName}
                </div>
            }

        </Fragment>
    )
}

export default App;

 

저작자표시

'React.js' 카테고리의 다른 글

23-01-25) firebase에 react배포하기  (0) 2023.01.25
23-01-25) 10. 리액트 ContextAPI  (0) 2023.01.25
23-01-19) 8. React라우터  (0) 2023.01.19
23-01-18) 7.React에 css적용하기  (0) 2023.01.18
6. 리액트 기본훅  (0) 2023.01.17
댓글