230120 React Ajax로 외부 데이터 통신하기

Ajax로 외부 데이터 통신하기

-웹 페이지의 이동없이 필요한 데이터만 전송하는 기술.
-비동기적으로 처리함.

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

 

---

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

Promise=fetch(요청주소)

fetch에서 데이터 가져와서 바로 state에 넣으면 안된다! 
데이터가져오면->state바뀜->렌더링되어버림->다시데이터가져옴->다시state업데이트. 무한루프에 빠져버린다.
이벤트 안에서 해주어야 한다.

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

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

---

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

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

 

import { Fragment, useEffect, useState } 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))
    }

    //화면이 mount이후 데이터 가져오기 -useEffect(function,[])
    const [datas, setDatas] = useState();
    useEffect(() => {
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
            .then(response => response.json())
            .then(data => setDatas(data))
    }, []);


    return (
        <Fragment>
            <button onClick={handleClick}>데이터가져오기</button>
            {raw === undefined ?
                <div>데이터준비중...</div>
                :
                <div>{raw.userId}<br/> {raw.userPw}<br/> {raw.userName}</div>
            }

            <hr />
            <h3>mount이후 데이터 가져오기</h3>

            {
                datas && <div>
                    아이디: {datas.userId}<br/>
                    비밀번호: {datas.userPw}<br/>
                    이름: {datas.userName}<br/>
                </div>
            }
            
        </Fragment>
    )
}

export default App;

undefined해결

1. state raw :  버튼을 클릭하기 전 raw는 undefined고, 데이터를 가져오면 set을 통해 값이 생긴다. 

-따라서 이전엔 다른 태그를 보여주고, 클릭하여 값이 생기면 원하는 태그를 보여준다.

 

2. state datas : datas는 mount전에는 undefined이고, mount 이후 set을 통해 값이 생긴다.

-따라서 useEffect(함수,[])를 통해 mount이후 데이터를 출력한다. 한번만!

 

 

JS &&연산자

{data && <div>
            {data.userId}<br />
            {data.userPw}<br />
            {data.userName}<br />
         </div>
}

js에서 제공하는 구문. undefined가 false로, 없으면 실행되지 않으며 뒤에 데이터가 있으면 true로 실행되는 구문

앞이 false면 바로 반환, 뒤가 false면 뒤를 반환. 둘다 true면 뒤를 반환, 둘다 false면 앞을 반환.

 

 

처음 화면이 켜지면 아주 잠깐동안 아래 내용이 없다가 출력됨. 버튼을 누르면 state값을 받아 내용 출력.