버튼 누르면 원하는 위치에 div박스 생성 어떻게 하나요?..

[유동근]

다음 그림과 같이 위에 상품 3개 버튼을 누르면 
그 밑에 상품3개 또 버튼을 누르면 그 밑에 상품 3개가 나오게 하고 싶은데 
여러가지 방법들을 시도해봤는데 결국 안되가지고 여쭤보러 왔습니다…

function Main() {
  let [shoes, setShoes] = useState(data);
  let [num, setNum] = useState(2);

  if (num > 4) {
    alert("안됩니다.");
  }

  return (
    <>
      <div>
        {" "}
        <div className="main-bg"></div>
        <div>
          <Row>
            {shoes.map((a, i) => {
              return <Item shoes={shoes[i]} i={i + 1}></Item>;
            })}
          </Row>
        </div>
      </div>
      <button
        onClick={() => {
          setNum(num + 1);
          axios
            .get("https://codingapple1.github.io/shop/data" + num + ".json")
            .then((info) => {
              let copy = [...shoes, ...info.data];
              setShoes(copy);
            })
            .catch(() => {
              console.log("실패");
            });
        }}
      >
        버튼
      </button>
    </>
  );
}

[codingapple]

하나의 상품을 <Col md={4}> </Col> 안에 넣읍시다

[글쓴이]

글