ajax2 숙제3번. '더보기' 버튼을 클릭한 후에는 '로딩중'이라는 글자 넣는 것에 관한 질문입니다.
구현하기 위해 코드를 다음과 같이 작성했습니다. (주요 부분에 bold 처리했습니다)
let [loading, setLoading] = useState(false);
<button onClick={() => {
setLoading(true);
setBtnClickCnt(btnClickCnt + 1);
console.log(btnClickCnt);
btnClickCnt == 1 ?
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result) => {
let newShoesList = [...props.shoesList];
newShoesList = newShoesList.concat(result.data);
props.setShoesList(newShoesList);
setLoading(false);
})
.catch(() => {
console.log('AJAX 요청 실패');
setLoading(false);
}) :
btnClickCnt == 2 ?
axios.get('https://codingapple1.github.io/shop/data3.json')
.then((result) => {
let newShoesList = [...props.shoesList];
newShoesList = newShoesList.concat(result.data);
props.setShoesList(newShoesList);
setLoading(false);
})
.catch(() => {
console.log('AJAX 요청 실패');
setLoading(false);
}) :
alert("더 이상 상품이 존재하지 않습니다.");
setLoading(false);
}}>더보기</button>
{ loading ? <p>로딩 중입니다...</p> : null }
alert() 아래에 setLoading(false)를 넣지 않으면 alert 후에, 로딩 중이라는 글자가 뜨길래 setLoading(false)라는 코드를 넣었습니다. 그랬더니 버튼을 눌렀을 때 로딩 중이라는 글자가 뜨지 않습니다. 제가 생각하기에는 중첩 삼항연산자에서 : 뒤에 두 줄(alert, setLoading(false))가 하나로 묶이는 처리가 되지 않아서 그런 것 같은데 혹시 그런 것일까요? 만약 그렇다면 삼항연산자보다 맨 마지막 setLoading(false)가 먼저 실행되는 것인가요?
