React Axios 사용 시에 오류 없어도 catch가 일어난 이유

            <button onClick={()=>{
              //axios 사용
              
              axios.get('https://codingapple1.github.io/shop/data'+dataNum+'.json').then((result)=>{
                
                console.log(result);
                  let data = result.data;
                  let copy = [...shoes,...data]; //기본 배열에 추가하는 방법
                  
                  setShoes(copy);
                  
                  let numCopy = dataNum;
                  numCopy = numCopy + 1;
                  setDataNum(numCopy);
              }).catch(
                  setResultShoes(false) //제품이 더이상 없을 시에 발동
              )
            }}>버튼</button>

 

위와 같인 코드를 작성했다.

 

문제 1. 3번 클릭시에 404오류가 화면에 표시 되었다.

 

문제 2. 1번만 클릭해도 아직 데이터가 있음에도 catch가 발동하여 데이터가 없다는 표시가 뜨는 상황

              axios.get('https://codingapple1.github.io/shop/data'+dataNum+'.json').then((result)=>{
                
                console.log(result);
                  let data = result.data;
                  let copy = [...shoes,...data]; //기본 배열에 추가하는 방법
                  
                  setShoes(copy);
                  
                  let numCopy = dataNum;
                  numCopy = numCopy + 1;
                  setDataNum(numCopy);
              }).catch(
                  setResultShoes(false) //제품이 더이상 없을 시에 발동
              )

답은 간단했는데 .catch()는 랜더링 시에 모든 함수가 발동되게 되어있었다. 모든 함수가 그렇다. 랜더링시에 작동한다. 그 이유는 JSX의 문법적 특성인데 모든 함수를 불러오는 구간은 '함수호출'이 아닌 '함수 정의가 되어야 한다고 한다.

 

DOM 엘리먼트는 이벤트 핸들러 전달 시 문자열로 전달했지만,
React는 모두 JSX를 사용하여 인라인 형식으로 전달해야 한다.
(쉽게말해서, React는 {중괄호}안에 JS로 전달하면 된다는 뜻)

DOM : <button> 보단 </button>
React : <button onClick={()=>{함수명()}}> 보단 </button>

 

              }).catch(
                ()=>{
                  setResultShoes(false) //제품이 더이상 없을 시에 발동
                }
              )

 

다음과 같이 작성하니 해결되었다.

 

참고 블로그 : https://velog.io/@keynene/React-onClick%ED%95%A8%EC%88%98-%EC%9E%90%EB%8F%99%EC%8B%A4%ED%96%89-onClick-undefined-React%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0