react 비동기통신2

어제에 이어 react 비동기통신 정리 2탄.

json

원래 서버와 문자자료만 주고받을 수 있음
object/array 이런거 못주고받음.
근데 object/array 자료에 따옴표를 쳐놓으면 받을수있음.

	"{"name" : "kim"}" // 이렇게.

이걸 JSON 이라고 함.
JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있음.
그래서 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야하는데
axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서.
출력해보면 object/array가 나옴.
개편함.

fetch

쌩자바스크립트 문법.
비동기통신때 사용.
아래와같이 사용.

	fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

fetch() 를 이용해도 GET/POST 요청이 가능.
근데 JSON -> object/array 이렇게 axios처럼 자동으로 안바꿔줌.
직접 바꾸는 작업이 필요.

post요청은 어떻게해요

어제 get에 이은 post 요청.
post는 클라이언트단에서 서버단으로 데이터를 전송할때 씀.

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

이렇게 해주면됨

여러 url 동시요청법

Promise.all사용.

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

뒤의 then은 모든 url요청이 다 성공했을때 실행되는코드.
따로따로 실행결과를 얻을때는 당연히 url요청도 그냥 따로따로 하면됨.

ajax로 가져온 데이터를 html에 꽂을 때 에러나는이유.

내가 코딩을 잘못해서가 가장크겠지만
통신을 해서 데이터를 가져오기전에 html렌더링이 먼저되면 에러가 발생할수있음.
조건문걸어서 데이터를 잘 가져왔을시 렌더링해라~로 바꾸면될듯.

응용문제

응용1. 버튼을 2번 누르면 7,8,9번 상품을 가져와서 html로 보여주려면?

아래 url로 GET요청하면 7,8,9번 상품 줌.
https://codingapple1.github.io/shop/data3.json
버튼을 몇번 눌렀는지 어디 변수나 state 같은 곳에 기록. url숫자부분을 조작.

응용2. 버튼을 3번 누르면 더 상품이 없다고 안내문을 띄우려면?

숫자기록한 변수나 state가 3이상이면 alert.

내가 푼 방법 1

자꾸 에러가 나서 봤더니 비동기 통신 먼저 이루어지는것 때문에 count가 요상하게 됨.
useEffect써서, urlCount state가 변경되면 데이터를 가져오도록 변경.
조건문으로 버튼을 3번 누르면 더 상품이 없다고 안내문을 띄움.
물론 막혀서 구글링으로 찾아낸 방법.
빡통이라서 혼자 못풀겠음....

  //버튼누르면 다음 상품들을 가져오게 하는 스위치용 state
  let [urlCount, setUrlCount] = useState(1);

  //urlCount가 변경되면 동작.
  useEffect(() => {
    if (urlCount > 1) {
      if (urlCount > 3) {
        alert("잘못된 요청입니다. 3 이상임.");
      } else {
        let StringTest =
          "https://codingapple1.github.io/shop/data" + urlCount + ".json";
        axios.get(StringTest).then((result) => {
          console.log(result.data);
          //shoes state에 가져온 데이터를 넣어주기
          let copy = [...shoes, ...result.data];
          setShoes(copy);
          console.log(copy);
        });
      }
    }
  }, [urlCount]);

응용3. 버튼을 누른 직후엔 "로딩중입니다" 이런 글자를 주변에 띄우고 싶으면?

요청이 성공하거나 실패하거나 후엔 "로딩중입니다" 글자를 제거해야 함.
스위치 state하나만들고, ui컴포넌트 하나 만들어서
통신시작때 띄우고 통신끝나면(catch포함) 숨기기. true false.
setTimeOut함수를 사용하여 3초 지연. 로딩이 나타나고 사라지는걸 좀 확실하게 확인하기 위해.

  //로딩중 ui 띄우는 스위치용 state
  let [loadingSwitch, setLoadingSwitch] = useState(false);
  
  useEffect(() => {
    if (urlCount > 1) {
      if (urlCount > 3) {
        alert("잘못된 요청입니다. 3 이상임.");
      } else {
         //로딩중 컴포넌트를 보이도록 바꿈.
        setLoadingSwitch(true);
  		//axios 통신
        .
        .
        .
     	//통신 이후, 3초 후에 다시 안보이도록 바꿈.
        setTimeout(() => setLoadingSwitch(false), 3000);
      }
    }
  }, [urlCount]);
  .
  .
  .
  .
  //html 부분
  {loadingSwitch == true ? <LoadingUi /> : null}
  .
  .
  .
  //컴포넌트 부분
  const LoadingUi = () => {
    return <div>로딩중입니다...</div>;
  };