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

[나님코딩등장]

위에 항목을 하고싶어서

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가 돌아 탭으로 구현한 의미가 없습니다... 혹시 이경우 어떻게 해야 할까요?

[codingapple]

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

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

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

[나님코딩등장]

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

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

[codingapple]

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

[나님코딩등장]

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

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

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

[codingapple]

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

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

 

[글쓴이]

글