원글 페이지 : 바로가기
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) //제품이 더이상 없을 시에 발동
)
}}>버튼 위와 같인 코드를 작성했다. 문제 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 : React : }).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