[react][setTimeout]슬라이드

 

배경이미지 배열

const [bg,setBg] = useState(
        ["<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain1.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain3.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain1.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain3.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain1.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain3.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain1.png>",
        "<https://oimg1.kbstar.com/img/ocommon/2018/main/visual_submain3.png>"]);

보여줄 데이터가 8개이므로 배경이미지도 8개로 맞춰준다.

배열 인덱스 상태 변수

const [index, setIndex] = useState(0);

초기 값을 0으로 맞춰준다.

로딩 상태변수

const [loading,setLoading] = useState(false);

데이터를 fetch로 받아온 후에 setTimeout을 실행할 것이므로 초기 값을 false로 설정한 후 fetch후 true로 변경해준다.

데이터 받아오기

useEffect ( () => { 
        fetch("<http://localhost:9090/bank/goods>").then(res => res.json()).then(res => {
            
            setGoods(res);
            setLoading(true);
            }
        );
     
    }, []);

goods데이터에 서버로부터 받아온 데이터를 저장시킨다. loading값을 true로 바꿔준다.

setTimeout

useEffect(()=>{
    if(loading==true){
        const timer = setTimeout(()=>{
            if(index<goods.length-1){
                setIndex(index+1);
            }else{
                setIndex(0);
            }
            
        },3000);
        
        
        return ()=>clearTimeout(timer);
    }
   },[index,loading]);

loading과 index가 변경될때 실행시킨다.

loading이 true일때 setTimeout을 실행시킨다.

태그

const GoodsUlStyle = ({good,back})=>{
        return <div className='goodsBox' style={{backgroundImage:`url(${back})`}}>
            <h3>
                {good.gName}
            </h3>
            {good.gInterest!=0?
                <p>연 {good.gInterest}%</p>
            :null}
            {good.gPeriod!=0?
                <p>최대 {good.gPeriod}개월</p>
            :null}
            {good.gMPay!=0?
                <p>월납 {good.gMPay}원</p>
            :null}
            {good.gAge!=0?
                <p>만 {good.gAge}세부터 지급</p>
            :null}
            {good.gMaturity!=0?
                <p>만기 {good.gMaturity}년</p>
            :null}
            <ul className='buttonClass'>
            {
                goods.map((g,i)=>{
                    return <li ><input type="radio" onClick={()=>setIndex(i)}></input></li>
                })
            }
            <li><img src="/pause.png" width="20px" height="20px" style={{cursor:"pointer"}} onClick={()=>setLoading(false)}></img></li>
            <li><img src="/play.png" width="20px" height="20px" style={{cursor:"pointer"}} onClick={()=>setLoading(true)}></img></li>
            </ul>
        </div>
    }
 
    return (
        <div>
            <GoodsBlockStyle>
                나에게 딱 맞는<br></br>
                금융상품을 찾아보세요
            </GoodsBlockStyle>
            
            <GoodsUlStyle  good={goods[index]} back={bg[index]}></GoodsUlStyle>
        
               
        </div>
    );