React (11) Fetch

■ Fetch란?

- 자바스크립트 내장함수로 비동기통신을 구현할 때 사용한다.

※ 비동기통신 : 먼저 시작한 작업의 완료여부와 상관없이 다음 작업을 실행하는 것

 

■ Fetch get방식

- get방식 요청시 별도의 추가메서드는 사용하지 않고 url뒤에 내가 전달하고자 하는 값을 붙여서 전송한다.

● Fetch를 이용해 url호출 후 데이터 가져오기

function FetchGet(){

    useEffect(() => {

        const fetchData = async () => {
         
            const response = await fetch("http://date.jsontest.com?a=1");
            
            const body = await response.json();
            // json? response중 body에 있는 부분을 JSON형식으로 디코딩 => Javascript객체로 변환

            alert(body.date);

        };

        fetchData();

    });

    return <h1>fetch get test</h1>

}

 

■ Fetch get방식

function FetchPost(){

    useEffect(() => {
        
        const fetchData = async () => {

            const response = await fetch("http://date.jsontest.com", 
                {
                    method : "POST",
                    header : {
                        'Content-Type' : 'application/json'
                        // json형태의 데이터를 사용하기 위한 설정
                    },
                    body : JSON.stringify({
                        a : "test1",
                        b : "test2"
                    })
                }
            );

            const body = await response.json();

            alert(body.time);

        }

        fetchData();

    }, []);

    return (
        <div>
            <h1>Fetch Post Test</h1>
            <button> button css 보자 </button>
        </div>
    )

}

 

■ async ~ await을 붙인 이유?

- fetch함수, json함수 같은 경우 비동기적으로 작동하기 때문에 url을 호출하고 데이터를 가져오기 전에 response.json()메서드가 실행되면 에러가 발생할 수 있다.

- 따라서 데이터를 전부 다 가져온 후 아래 json함수가 호출되도록 흐름을 동기적으로 변환시켜주기 위함이다.