dev_공부일지/React 에러 정리
React Axios 사용 시에 오류 없어도 catch가 일어난 이유
dev_0hoon
2024. 2. 29. 15:28
<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) //제품이 더이상 없을 시에 발동
}
)
다음과 같이 작성하니 해결되었다.