[React] React 에서 Ajax 요청하기_2

💡 실습 포인트!

• 강사님이 이런 기능을 추가해보는 건 어떨까요? 라고 할 때마다 하나씩 기능을 추가해보았다.
• 배운 내용을 토대로 혼자서 기능을 모두 오류없이 만들어 추가해서 매우 뿌듯했다.
  (사진이 제대로 안 나오는 부분은 강사님이 제공해준 데이터라서 어쩔 수 없었다...저거도 직접 구글링하며 만들기엔 공부하고 있는 현재 새벽 5시...)
• 지금 보니 "로딩에 실패했습니다." 라는 문구보다 "더이상 상품이 없습니다." 로 작성할 걸 그랬다. 수정해둬야지..

---

💜 "상품 더보기" 버튼 누를 때마다 다른 경로에서 데이터 받아와서 상품 레이아웃에 추가하기

• 이 기능은 만들기 전에 강사님이 count 기능을 넣어주면 된다며 약간의 힌트를 주셨다.
• 강사님이 제공한 데이터 경로는 json 파일명이 1, 2, 3 과 같이 모두 숫자로 끝난다는 것이었다.
  • https://codingapple1.github.io/shop/data1.json
  • https://codingapple1.github.io/shop/data2.json
  • https://codingapple1.github.io/shop/data3.json

// 전체 코드 미리보기
// 코드의 내용이 너무 길어 불필요한 부분은 제외했다.

import axios from 'axios';

function App(){
  
  let [count, setCount] = useState(2);
   
  return (
    <button className="btn btn-primary" onClick={()=>{
      axios.get(`https://codingapple1.github.io/shop/data${count}.json`)
      .then((result)=>{
      	  setCount(count+1);
          let newData = result.data;
          props.setShoes([...props.shoes, ...newData]); 
      })
      .catch(()=>{ 요청 실패 시 실행할 코드 })
    }}>상품 더보기</button>
  )
}

• 우선 data1.json 파일의 데이터는 이미 shoes 라는 state 에 담겨있어 브라우저상 첫 줄에 3개의 레이아웃으로 나오고 있으므로, 나는 data2.json 파일부터 데이터를 불러와야 했다.
• 즉, 경로 부분의 data 뒤에 숫자가 2, 3 과 같은 순으로 숫자가 들어가야 하므로, 먼저 useState() 를 활용하여 count 라는 state 를 만들어준 후 경로의 data 뒤에 ${count} 라고 작성해주었다.
• 그러고 나서 count 라는 state 의 초기값으로 2를 넣어준 다음, 요청이 성공할 때마다 setCount() 에 count + 1 한 값을 넣어주었다.
• 그러면 버튼을 1번 눌렀을 때는 count 가 2인 상태에서 클릭한 것이므로 data2.json 으로 GET 요청을 하고, 요청이 성공하여 count 가 3으로 바뀐다.
• 그 상태에서 버튼을 1번 더 누르면 count 가 3인 상태에서 클릭한 것이므로 data3.json 으로 GET 요청을 하고, 요청이 성공하여 count 가 4로 바뀐다.
• 이런식으로 만약 data4.json, data5.json ... 이라는 경로에 데이터가 있으면 계속해서 데이터를 받아와 상품 레이아웃에 추가할 수 있는 것이다.

---

💜 로딩창 UI 띄우기 및 숨기기

// 전체 코드 미리보기
// 코드의 내용이 너무 길어 불필요한 부분은 제외했다.

import axios from 'axios';
import styled from 'styled-components';

let Loading = styled.div`
  font-size : 20px;
  font-weight : bold;
  color: #484848;
  padding: 15px 20px;
  background : #eee;
  border-radius : 5px;
  margin : 10px 0;
`

function App(){
  
  let [load, setLoad] = useState(false); // 로딩창 UI 기본 상태는 안 보이게!
   
  return (
  
    {
      // 로딩중일 때 로딩창 UI 가 보이고, 아닐 때는 로딩창 UI 가 보이지 않는다.
   	  load == true ? (<Loading>로딩중입니다...</Loading>) : null
    }
          
    <button className="btn btn-primary" onClick={()=>{
      setLoad(true); // "상품 더보기" 버튼을 클릭하면 로딩창 UI 보이게!
      axios.get(`https://codingapple1.github.io/shop/data${count}.json`)
      .then((result)=>{
          setLoad(false); // GET 요청이 성공하면 로딩창 UI 안 보이게!
      })
      .catch(()=>{
      	setLoad(false); // GET 요청이 실패하면 로딩창 UI 안 보이게!
      })
    }}>상품 더보기</button>
  )
}

• 먼저 로딩창 UI 를 styled-components 라이브러리를 이용하여 만들어주었다. 
  (styled-components 라이브러리 사용방법 보러가기 클릭!)
• 로딩창 UI 의 상태에 따라 보이거나 안 보이도록 해야 하므로 먼저 useState() 를 사용해 상태를 저장할 수 있는 load 라는 state 를 만들어주었다.
• 그리고 html 태그들 사이의 원하는 위치에 삼항 연산자를 활용하여 로딩중일 때 로딩창 UI 가 보이고, 아닐 때에는 로딩창이 보이지 않도록 코드를 작성해주었다.
• 그 다음으로 "상품 더보기" 버튼을 클릭하면 일단 GET 요청을 하는 동안은 로딩중인 것이므로 로딩창 UI 가 보이도록 setLoad() 안에 true 로 작성해주었다.
• GET 요청이 성공하거나 실패하면 로딩은 끝난 것이므로 로딩창 UI 가 보이지 않도록 setLoad() 안에 false 로 작성해주었다.

---

💜 더이상 보여줄 상품이 없을 때 "상품 더보기" 버튼 숨기기

// 전체 코드 미리보기
// 코드의 내용이 너무 길어 불필요한 부분은 제외했다.

import axios from 'axios';

function App(){
  let [count, setCount] = useState(2);
  let [view, setView] = useState(true);
   
  return (
          
    {
      view == true 
      ?
      (
        <button className='btn btn-primary' onClick={()=>{ 
          axios.get(`https://codingapple1.github.io/shop/data${count}.json`)
          .then((result)=>{
            setCount(count+1);
            let newData = result.data;
            props.setShoes([...props.shoes, ...newData]);
          })
          .catch(()=>{
            setView(false);
          });
         }}>상품 더보기</button>
      )
      : null
    }
  )
}

• 강사님이 제공해주신 데이터 경로는 data3.json 까지이다.
• 따라서 data4.json 에서 데이터를 받아오려고 하면 해당하는 경로가 없기 때문에 GET 요청이 실패한다.
• 그러므로 .catch() 안에 "상품 더보기" 버튼을 숨기는 기능을 만들어주면 될 것 같았다.
• 다만 다른 기능의 경우 "상품 더보기" 버튼과는 직접적인 연관이 없었는데 이 기능의 경우 코드를 작성해놓은 이 버튼 자체가 안보이도록 하는 거라 삼항 연산자를 활용하여 코드를 작성할 때 내가 하고 있는 게 맞나 싶었다.
• 여튼 더이상 보여줄 상품이 없을 때 "상품 더보기" 버튼을 숨기는 방법은 알림창 UI 를 만들고 적용하는 방법과 유사하다.
• 먼저 view 라는 state 를 만들어주고, 처음에는 "상품 더보기" 버튼이 보여야 하므로 true 라고 초기값을 작성해주었다.
• 그 다음으로 GET 요청이 실패하면 "상품 더보기" 버튼이 보이지 않아야 하므로 catch() 안에 setView(false) 로 작성해주었다.

{
	view == true ? (<button>상품 더보기</button>) : null
}

• 그리고 원하는 위치에 위와 같이 삼항 연산자를 활용하여 view 라는 state 가 true 라면 "상품 더보기" 버튼이 보이고 아니라면 "상품 더보기" 버튼이 보이지 않아야 한다고 코드를 작성해주어야 한다.
• 따라서 길게 작성한 button 태그를 삼항 연산자를 활용한 코드의 button 태그 자리에 넣어주었다. 

---

💜 요청에 실패할 경우 로딩 실패 알림창 UI 띄우기

// 전체 코드 미리보기
// 코드의 내용이 너무 길어 불필요한 부분은 제외했다.

import axios from 'axios';

let Loading = styled.div`
  font-size : 20px;
  font-weight : bold;
  color: #484848;
  padding: 15px 20px;
  background : #eee;
  border-radius : 5px;
  margin : 10px 0;
`

function Main(props) {

  let [loadFail, setLoadFail] = useState(false);

    return (

          {
            loadFail == true ? (<Loading>로딩에 실패했습니다.</Loading>) : null
          }
          
          <button className='btn btn-primary' onClick={()=>{ 
            axios.get(`https://codingapple1.github.io/shop/data${count}.json`)
            .then((result)=>{
            })
            .catch(()=>{
              setLoadFail(true);
            });
           }}>상품 더보기</button>
    )
}

• 로딩 실패창 UI 는 styled-components 라이브러리를 이용하여 만들었던 로딩창 UI 를 재활용했다.
  (styled-components 라이브러리 사용방법 보러가기 클릭!)
• loadFail 이라는 state 를 만들어준 후 초기값은 false 로 설정해주었다.
• html 코드들 사이의 원하는 위치에 삼항 연산자를 활용하여 loadFail 이라는 state 가 true 가 되면 로딩 실패창 UI 를 보여주도록 코드를 작성했다.
• 그리고 GET 요청이 실패하면 로딩이 실패한 것이므로 .catch() 안에 setLoadFile(true) 라고 작성하여 브라우저에서 로딩 실패창을 확인할 수 있도록 해주었다.

---

💜 로딩 실패 알림창 UI 타이머 기능 추가하기

// 전체 코드 미리보기
// 코드의 내용이 너무 길어 불필요한 부분은 제외했다.

import axios from 'axios';

let Loading = styled.div`
  font-size : 20px;
  font-weight : bold;
  color: #484848;
  padding: 15px 20px;
  background : #eee;
  border-radius : 5px;
  margin : 10px 0;
`

function Main(props) {

  let [loadFail, setLoadFail] = useState(false);
  
function failTimer(){
    setTimeout(()=>{
      setLoadFail(false);
    },2000)
    clearTimeout(failTimer);
};

    return (

          {
            loadFail == true ? (<Loading>로딩에 실패했습니다.</Loading>) : null
          }
          
          <button className='btn btn-primary' onClick={()=>{ 
            axios.get(`https://codingapple1.github.io/shop/data${count}.json`)
            .then((result)=>{
            })
            .catch(()=>{
              setLoadFail(true);
              failTimer();
            });
           }}>상품 더보기</button>
    )
}

• 실습하면서 브라우저에서 내가 만든 기능들이 잘 되는지 확인하던 찰나에 로딩 실패창 UI 가 계속 떠있는게 거슬렸다.
• 마침 useEffect() 공부할 때 timeout() 함수도 배웠으니 이걸 활용해서 실패창 UI 가 2초 정도 시간이 지난 후에 setLoadFile() 을 false 로 만들어 사라지게 할 수 있을 거 같아서 기능을 추가해보았다.
• 먼저 failTimer() 함수를 만들어서 이 함수 안에 setTimeout() 함수를 넣고, setTimeout() 함수를 통해 setLoadFile(false) 가 2000ms 후에 실행되도록 코드를 작성했다.
• 그리고 원치 않는 버그가 발생하지 않도록 setTimeout() 함수가 실행된 이후에 failTimer() 가 타이머 기능 해제가 되도록 clearTimeout(failTimer) 라고 추가로 코드를 작성해주었다.
• 이렇게 만든 함수를 . catch() 함수 안의 setLoadFile(true) 라는 코드 후에 실행되도록 코드를 추가해주었다.