[React_study] Ajax (post, fetch)

* POST 요청

axios.post('URL', {name : 'kim'})

• 실행시 서버로 { name: "kim" } 자료가 전송이 된다.
• 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다.

* 동시에 Ajax 요청 여러개 요청하기

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

• 위의 코드처럼 구성을 하게 되면 URL1, URL2로 GET요청을 동시에 해준다.
• 둘 다 완료시 특정 코드를 실행하려면 .then() 뒤에 작성하면 된다.

* object/array 자료 전송

• 원래 서버는 문자 자료만 주고 받을 수 있다.
• 따라서 object/array 자료는 JSON형태로 전송을 보내야 한다.
  • JSON은 문자 취급을 받기 때문이다.
• ex) "{ "name" : "kim" }"
• axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해준다. 따라서 출력해보면 object/array가 나온다.

* fetch() 사용 예시 코드

fetch('URL')
  .then((response) => response.json())
  .then((response) => console.log(response));

• JavaScript문법인 fetch()를 이용해도 GET/POST요청이 가능하다.
• 하지만 JSON -> object/array로 자동으로 변경해주지 않기 때문에 별도의 변환 작업이 필요하다.
• JSON.stringify() : 값이나 객체를 JSON 문자열로 변환
• JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

* fetch() 사용 예시 코드 (async, await)

• async, await를 이용해서 api를 가져온뒤 useEffect를 이용하여서 api를 한번 호출해준다.

const getApi = async () => {
    const URL = 'api url'
    const response = await fetch(URL);
    const json = await response.json();
  };
  
useEffect(() => {
  getApi();
}, []);

• 아래의 코드처럼 축약도 가능하다.

const getApi = async () => {
    const json = await (await fetch('api url')).json();
  };
  
useEffect(() => {
  getApi();
}, []);