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

home2 게시판 React 게시판 랜덤으로 영화 포스터 뽑아서 탭에 넣어주기

랜덤으로 영화 포스터 뽑아서 탭에 넣어주기

  • 이 주제에는 5개 답변, 2명 참여가 있으며 codingapple4 년 전에 전에 마지막으로 업데이트했습니다.
6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 글쓴이
  • #10608

    위에 항목을 하고싶어서

    function TabContent(props){

        let [랜덤,랜덤변경] = useState([0,0,0]);
        useEffect(()=>{
            props.스위치변경(true);
            var j = [];
            for(var i = 0; i <3; i++){
                j.push(rand(0,6));
            }
            랜덤변경(j);
        })
        if(props.누른탭 === 0){
            return <div>
              <img src="{props.글합[랜덤[0]].image}"/>

    .....

    }

    function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

     

     

    // 글합은 json 형식의 부모한테서 내려온것 

    포스터가 무작위로 뜨지 않고 rand 함수를 직접 넣으면 뜨긴하지만 계속적으로 rand가 돌아 탭으로 구현한 의미가 없습니다... 혹시 이경우 어떻게 해야 할까요?

    #10614

    codingapple
    키 마스터

    탭을 누를 때마다 <TabContent> 이게 재렌더링되어서 그런게 아닐까요 

    그럼 TabContent 함수 안에 있던 내용과 useEffect를 다시 읽으니까요 

    반복문 돌리는 부분과 랜덤이라는 state를 상위컴포넌트로 옮기거나 밖으로 옮기거나 하면 될듯합니다

    #10646

    그렇다면 상위컴포넌트로 옮겼을경우 아래서 받아오는 코드를

    if(props.누른탭 === 0){
            return <div>
                <img src = {props.글합[props.랜덤[0]].image}/>
                <p>{props.글합[props.랜덤[0]].title}</p>
                
            </div>  이렇게 적었는데 오류가 납니다... 랜덤적으로 추천작을 소개시켜주는 탭을 이렇게 구현하면안될까요?

    #10664

    codingapple
    키 마스터

    무슨 에러가 납니까 저건 별문제없어보이는데요 

    #10673

    props.랜덤[0] 으로 넣게되면 image 링크를 받아올수없다고 뜨고

    0,1,2 이런 숫자를 글합 리스트 인덱스에 넣게되면 정상적으로 나옵니다. 

    어떤 오류인지 모르겠습니다,,, 

    #10678

    codingapple
    키 마스터

    props.랜덤을 출력해봐서 이게 없으면 props로 전송을 안한 것이고   

    props 전송을 잘했는데 props.랜덤을 출력해보면 이상한 값이 나오면 랜덤 state를 조작하는 부분이 이상한 것입니다  

     

6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 답변은 로그인 후 가능합니다.

About

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

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

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