선생님 useEffect로 ajax응용문제2번 버튼지우기 질문있습니다

[김영인]

(App 컴포넌트의 상단 return() 외부)

(App 컴포넌트의 return()내부)

유저가 상품더보기 버튼을 누르면 axios로 데이터를 받아와 products를 보여주는 기능 구현중입니다.
1. 유저가 버튼 누를때마다 json을 순차적으로 받아옴
2. 더이상 받아올 json이 없다면 .catch()문을 통해 로딩화면이 사라짐, alert()띄워줌, btnInvisible의 state를 바꿔줌

근데 여기서 문제는 useEffect(()=>{},[btnInvisible]) 을 활용해서 btnInvisible state가 변경될때 useEffect가 실행되어야 하는데
메인페이지가 랜더링 되자마자 useEffect가 실행되어 버튼이 그냥 사라집니다.

위 사진처럼 되어야하는데 아래 사진처럼 사라집니다.

setTimeout은 적용되고 있습니다.
왜 useEffect가 btnInvisible state가 변경되지 않았는데 작동하는지 궁금합니다.
제 생각엔 .catch() 문 안의 setBtnInvisible로 state가 변경되어야만 useEffect가 실행되어야 할텐데.. 잘 모르겠습니다

+ 추가로 .catch()문 안에서 setBtnInvisible을 없애서 state가 변경되지 않도록 했지만 useEffect가 작동합니다.

[codingapple]

원래 [] 안에 뭐가 있어도 처음 렌더시 1회 실행됩니다

[김영인]

그럼 혹시 .catch로 더이상 불러올 데이터가 없을때 버튼을 지워주는 기능을 구현하는 방법 힌트 주실 수 있으신가요?

[codingapple]

btnInvisible이 1이면 버튼 보여주지말라고 조건문 쓰면 끝일듯요

[김영인]

와.. 진짜 한번에 고쳐졌습니다 ㅠㅠㅠㅠㅠ
항상 많이 배우겠습니다!!

[글쓴이]

글