axios.get 요청 숙제 관련 질문입니다.

[박용기]

function ItemList() {
  let [shoes, setShoes] = useState(data);
  let [btnCnt, setBtnCnt] = useState(1);

  return (
    <>
      <div className="main-bg"></div>
      <div className="container">
        <div className="row">
          {shoes.map((a, i) => {
            return <Card shoes={shoes[i]} i={i}></Card>;
          })}
        </div>
      </div>
      <button
        onClick={() => {
          setBtnCnt = btnCnt++;
          console.log(btnCnt);
          axios
            .get(`https://codingapple1.github.io/shop/data${btnCnt}.json`)
            .then((result) => {
              let copy = [...shoes, ...result.data];
              setShoes(copy);
            })
            .catch((err) => {
              console.log("요청 실패:", err);
            });
        }}
      >
        더 보기
      </button>
    </>
  );

최초 btnCnt 만 let으로 선언 후 onClick되면 btnCnt++;을 해줘서 버튼을 눌렀을 때 1씩 증가 시켰습니다.
콘솔로 확인해보니 axios.get 요청을 주석 처리하면 1씩 잘 증가하는데 axios.get 요청한 상태에서 콘솔로 확인하면 2만 출력됩니다.

useState로 해보면 달라질까 해서 했지만 역시나 동일한데 왜 그런걸까요....?

[박용기]

          setBtnCnt = btnCnt++;  >>> setBtnCnt(btnCnt + 1); 해결했습니다... ㅎㅎ;;;

[글쓴이]

글