• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 ajax 첫번째 과제 질문드립니다.

ajax 첫번째 과제 질문드립니다.

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #102734

    김태경
    참가자
    <Row>
              {props.shoes.map((eachShoe,i) =>{
                return(
                  <Card eachShoe={eachShoe} navigate={props.navigate}></Card>
                )
              })}
    </Row>
    초반부에서 진행할때 강사님은 일반 부트스트랩에서 가져오셔서 사용하셨고,
    저는 그때 음성으로 리액트 부트스트랩에서 가져오는게 좋다고 하셔서
    리액트 부트스트랩에서 가져와서 사용하였는데 그래서 그런건지 ajax로 데이터 가져올시 추가된 3개가 옆으로 추가되네요
    function CardCase(props) {
      console.log("component 시작")
      const n = 3;
      let groups = [];
      for (let i = 0; i < props.shoes.length; i += n) {
        groups.push(props.shoes.slice(i, i + n));
      }
      console.log(groups)
      return (
        <>
            {
              groups.map((group, j) => (
                <Row>
                  {
                    group.map((eachShoe, i) => (
                      <Card eachShoe={eachShoe} navigate={props.navigate}/>
                    ))
                  }
                </Row>
              ))
            }
        </>
      );
      
    }
    이런식으로 추가해서 해결하긴했는데 원본 코드 부분 확인하고 싶은데 알 수 있을까요?
    다른 질문글에서 말씀해주신 class에 col-md-4 부여, style에 flex 부여는 해봤는데 안되네요
     
     
    #102763

    codingapple
    키 마스터
    https://react-bootstrap.netlify.app/docs/layout/grid#responsive-grids
    <Col sm={3}> 안에 카드 넣어야 모바일에서 세로로 정렬됩니다
    #102880

    김태경
    참가자
    해결했습니다 감사합니다
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠