TIL _ React fetch

Today 공부

• Promise all (복습)
• fetch , json()
• Ajex 요청

Promise all (복습)

• 구문 Promise.all( ) [1,2,3]
• Promise.all은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있습니다.
• Promise를 반환한다
  .then 으로 값을 받아와야 함

fetch API / fetch(), .json() - 메서드

• 코어자바스크립트

fetch()기본문법

• let promise = fetch(url, [options])
• url - 접근하고자 하는 url
• options – 선택 매개변수, method나 header 등을 지정할 수 있음

  ---

• fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환됩니다
• response.json() – 응답을 JSON 형태로 파싱합니다,

• MDN예제

  fetch('http://example.com/movies.json')
  .then(function(response) { // Response개체 반환
    return response.json(); // .json() 메서드 사용
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Ajex 요청

fetch API를 써서 서버에 요청
endpoint : http://서버주소/proverbs

  useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
    });
}, [filter]);

모든 네트워크 요청이 항상 즉각적인 응답을 가져다주는 것은 아니니,

외부 API 접속이 느릴 경우를 고려하여, 로딩화면 구현은 필수 로 해야한다.

로딩화면 구현도 상태처리가 필요하므로,
fetch 요청의 전후로 setIsLoading을 설정해주어 보다 나은 UX를 구현할 수 있습니다.

useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

마치며,

리액트는 이론도 이해가가고, 예제코드도 이해를 했지만
막상 코드를 작성하려하면 어디서부터 손을 대야할지 감이 잡히지 않는다.

목표 :
실습한 과제를 계속 복습하여 코드와 익숙해지기
컴포넌트형태를 직접 그려서 props와 state 사용이 어떻게 상태처리에 영향을 주는지 확인해보기

익숙해지는데 시간이 오래 걸리지 않게 공부를 많이해야겠다.