[FRONTEND]리액트 Fetch_Axios_콜백함수_Promise

1) Using Fetch - Web API - MDN

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch API 사용하기 - Web API | MDN

2) AJAX 와 APIs – React

https://ko.legacy.reactjs.org/docs/faq-ajax.html

AJAX 와 APIs – React

3) Axios 러닝 가이드

https://yamoo9.github.io/axios/

Axios 러닝 가이드

4) axios - npm

https://www.npmjs.com/package/axios

axios

5) 컴포넌트에 함수 전달하기 – React

https://ko.legacy.reactjs.org/docs/faq-functions.html

컴포넌트에 함수 전달하기 – React

6) 이벤트 처리하기 – React

https://ko.legacy.reactjs.org/docs/handling-events.html

이벤트 처리하기 – React

7) Promise - JavaScript - MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

---

Fetch API 사용하기

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.

콜백 기반 API인 XMLHttpRequest와 달리, Fetch API는 서비스 워커에서도 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제입니다. 또한 Fetch API는 CORS를 포함한 고급 개념을 HTTP 확장으로 정의합니다.

기본적인 리소스 취득 요청은 이렇게 생겼습니다.

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  //json 를 변수로 변환해서 처리하겠다.
  const jsonData = await response.json();
  console.log(jsonData);
}

기존 " " 안에 넣으면 문자열로 인식하지만 fetch를 사용하면 웹에 있는 데이터를 가져와서 담아오는 것으로 인식한다!

문자열이 아닌, 웹에 있는 제이슨형식의 데이터를 담아온다!!

웹에 있는 데이터를 가져올때 사용하는 메서드

 

실무에서는 악시오스를 많이 사용하는데 

악시오스를 사용하면 밑에 json 변환 과정이 생략이 가능하다!

const jsonData = await response.json();

---

// 웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을
// 주고 받습니다. http에서 사용하는 방식은 여러 가지가 있지만,
// GET과 POST 방식을 가장 많이 사용합니다.
// GET 방식은 http://example.com?ace=1&base=2와 같이 url? 뒤에
// 파라미터명=값 형태로 필요한 데이터를 전달합니다.
// GET 방식은 주로 데이터 조회나 검색 등의 기능에 사용됩니다.
// 즉, GET 방식은 데이터를 조회해 가져와 사용하는 것입니다.

        // 자바스크립트 내장 함수인 fetch를 사용하면 쉽게
        // 비동기 통신을 구현할 수 있습니다.
        // 여기서, 비동기 통신이란, 쉽게 말해, 먼저 시작한 작업의
        // 완료 여부와 상관없이 다음 작업을 실행하는 것입니다.
        // fetch를 사용해서 get 방식으로 url을 호출해 데이터를 가져옵니다.
        // 앞서 가져온 데이터를 response라는 변수에 할당합니다.
        // 이때, fetch 함수에 변도의 http 메서드 설정이 없다면
        // get 방식으로 호출 합니다.

 

        // 앞서 response 변수는 json 형태이기 때문에 json() 함수로
        // 사용할 수 있도록 변환해 body라는 변수에 할당합니다.
        // 이때, fetch 함수의 비동기적 특징 때문에 데이터를 가져오기
        // 전에 에러가 발생할 수 있습니다. 이런 에러는 비동기 함수에
        // 동기적인 기능을 추가해 해결할 수 있습니다. 이때 사용하는 것이
        // async와 await 문법입니다. 비동기 함수를 실행하는 함수에
        // async를 추가하고, 동기적으로 처리돼야 하는 함수 구문 앞에
        // await을 추가해 줍니다.

 

---

FetchPost

// GET이 데이터를 조회해 가져와 사용하는 용도로 사용되다면,
// POST는 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용됩니다.
// POST 방식은 http body에 데이터를 넣어 전달하는데, url 뒤에 파라미터를
// 표시하지 않고 사용할 수 있다는 장점이 있습니다.
// post 방식도 get 방식과 마찬가지로 자바스크립트 내장 함수인 fetch를
// 사용하면, 비동기 통신을 쉽게 구현할 수 있습니다.

---

Axios 

// Axios란? 비동기 통신 HTTP Client 라이브러리이며, 웹브라우저와
// Node.js를 위한 Promise API를 활용합니다. 즉, Front-End와
// Back-End 간 비동기 통신을 위해 Ajax와 더불어 사용합니다.
// 참고로, Ajax 보다 Axios를 사용하는 경우가 많습니다.

// Axios 특징
// 1) 운영환경에 따라 웹브라우저의 XMLHttpRequest 객체 또는
//     Node.js의 HTTP API 사용함.
// 2) ES6 형의 Promise API 사용을 지원함.
// 3) 요청과 응답 데이터의 변형, HTTP 요청 취소, HTTP 요청과 응답을
//    JSON 형태로 자동 변경도 가능함.

// axios도 fetch와 마찬가지로 비동기 통신을 지원하며, axios는 fetch와
// 달리, 다음과 같이 별도로 설치한 후 임포트해서 사용합니다.
// npm install --save axios

 

axios 설치

설치완료

// url 호출이 완료되면, then 함수가 실행됩니다. 이때 호출 결과로
        // response가 반환됩니다. response와 호출된 변수명 사이에
        // data를 붙이면, 변수를 사용할 수 있습니다.

---

// axios로 post 방식의 호출을 하는 문법은 get 방식으로 호출했을 때와
// 거의 동일합니다. 다른 점은 post 함수의 파라미터로 json과 같은 형태의
// 데이터를 넣고, http body에 담아 url을 호출할 수 있다는 것입니다.

// React에서 import할때 { } 중괄호 의미
// import {axios} from "axios"; // 여기서는 중괄호하면 안됩니다.
// export 방식의 차이를 의미하며, export할때 default를 붙인
// 컴포넌트는 중괄호 없이 그냥 import하지만,
// default 없이 export 해준 컴포넌트의 경우,
// 중괄호 안에 담아서 import 해주어야 합니다.

 

        // axios.post('호출 url', json 데이터) 문법으로 post 방식의
        // http 호출을 합니다. json 데이터는 {key1:value1, key2:value2}
        // 형태로 사용하고 http body에 담겨 전송됩니다.
        // 그리고, 호출한 url에서는 body의 데이터를 사용하지 않기 때문에
        // 어떤 형식으로 사용하는지만 확인 합니다.

        // url 호출이 완료되면, then 함수가 실행됩니다. 이때 호출 결과로
        // response가 반환됩니다. response와 호출된 변수명 사이에
        // data를 붙이면, 변수를 사용할 수 있습니다.

 

---

Callback function

// 자바스크립트는 비동기적으로 동작합니다. 그래서 먼저 실행된 작업이
// 끝나지 않았더라도 다음 작업이 시작될 수 있습니다. 콜백 함수를 이용하면
// 특정 코드에 순서를 정해서, 원하는 시점에 실행할 수 있습니다.

 

// logPrint라는 함수를 호출하는데 파라미터로 1과 함수를 전달합니다.

 

            // 호출된 logPrint 함수는 전달 받은 파라미터 param에
            // 자기자신 1을 더해 2를 할당합니다. 2가 된 param 변수를
            // callback 함수에 다시 파라미터로 넣고 함수를 실행합니다.

        // callback(param); 에서 실행된 callback 함수는
        // 앞서, 본소스의 function(return1){ 에서부터
        // }.bind(this))까지 입니다.
        // this.logPrint(return1, function(return2){ 로
        // 다시 한번 logPrint 함수를 실행하는데
        // 앞서 function(return1){ 첫 번째 함수 실행에서 반환된
        // return1 값(2)을 파라미터로 전달합니다.

        // 위에 this와 아래의 this는 다릅니다. 그래서, this로
        // logPrint 함수에 접근해 사용하려고 하면 에러가 발생합니다.
        // 함수 밖의 this를 함수 안에서도 동일하게 사용하기 위해서
        // .bind(this)를 함수에 붙여줍니다.

---

Promise

Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

// promise는 콜백 함수와 같이 비동기적으로 동작하는 코드를 동기적으로
// 구현할 때 사용합니다. 이 promise를 사용하면 콜백 함수와 달리,
// 코드 가독성을 높일 수 있고, 예외 처리도 쉽게 할 수 있습니다.
// 즉, promise는 콜백 함수의 단점을 보완해 줍니다.
// promise는 대기, 이행, 거부의 개념이 있습니다. 대기 상태에서
// 이행 상태로 변할 때 then() 함수안의 코드가 실행 됩니다.
// promise then 함수를 사용하면 코드를 콜백 함수의 계단식 복잡한 코드
// 형태보다 가독성 있게 구현할 수 있습니다.

        // Promise라는 객체를 생성해 promise를 사용합니다.
        // 파라미터로 하나의 함수(resolve)만 받을 경우,
        // 이행 함수로 사용됩니다.

 // resolve 함수에서 파라미터로 전달된 결과값(react)을
 // result라는 파라미터로 받아 사용합니다.

5초 후에 react / react 200 이 뜬다.

---

// Promise의 상태가 대기, 이행, 거부 중 거부 상태가 됐을 때
// catch 함수를 실행합니다. 대기 상태의 Promise에 에러가 발생해
// 이행으로 상태 변화를 하지 못하는 경우 입니다.

// 거부 함수 reject를 실행하면서 Error 객체를 사용해
        // 에러를 발생 시킵니다.

// promise 동작 중 거부 함수가 실행되면, 이행 상태가 되지 못하기
    // 때문에 then 함수는 실행되지 않습니다.