[react][슬라이드] 3초마다 화면이 변경되는 슬라이드 구현

만들고 싶었던 화면

 

몇초인지는 모르겠으나 시간마다 화면이 자동으로 바뀌면서 금융상품을 보여주는 화면을 만들고자 한다.

내가 만든 화면

 

3초마다 화면을 바뀌게 했지만 버벅거리는 게 있다.

DB

db에 있는 데이터

데이터 받아오기

const [goods, setGoods] = useState([{"gName":"","gInterest":"","gPeriod":"","gMPay":"","gAge":"","gType":""}]);
useEffect ( () => { 
        fetch("<http://localhost:9090/bank/goods>").then(res => res.json()).then(res => {
            
            setLoading(true);
            setGoods(res);
            
            }
        );
       
    }, []);

fetch로 서버로 부터 데이터를 받아와서 상태변수에 넣어준다.

태그

const GoodsBlockStyle = styled.div`
    position: absolute;
width: 30vw;
height: 15vh;
left: 35vw;
top: 15vh;
padding: 2vw;
font-family: 'Manjari';
font-style: normal;
font-weight: 700;
font-size: 1.5rem;
background: #FFD74B;
border-radius: 2rem;
`;
const GoodsTableStyle = styled.table`
position: absolute;
width: 30vw;
height: 40vh;
left: 35vw;
top: 40vh;
font-family: 'Manjari';
font-style: normal;
font-weight: 700;
font-size: 1.5rem;
`;
const LogoStyle = styled.div`
width: 2vw;
height: 2vw;
text-align: center;
border-radius: 50%;
background: #FFD74B;
`;
return (
        <div>
            <GoodsBlockStyle>
                나에게 딱 맞는<br></br>
                금융상품을 찾아보세요
            </GoodsBlockStyle>
            <GoodsTableStyle>
            <Film slide={slidePx} goods={ goods[index] }></Film>
            </GoodsTableStyle>
        </div>
    );

원래는 slidePx로 태그를 이동시킬려고 했으나 그냥 데이터를 바꿔서 화면을 변경시키는 것을 했다.

const [index, setIndex] = useState(0);
setInterval(() => {
        if (loading) { 
            if (index == goods.length - 1) {
                setIndex(0);
            } else { 
                setIndex(index + 1);
            }
        }
        
    }, 3000);

3초마다 인덱스를 증가시켜 태그에 바인딩되는 데이터를 변경해 준다.

jsx 삼항연산자 사용하기

const Film = ({ goods, slide } ) => {
        return (
            <tbody
                className="film"
                style={{
                    transform: `translateX(${slide}vw)`,
                    transition: "0.5s ease",
                }}
            >
                <tr>
                                    <td><img src={process.env.PUBLIC_URL+"/savings.png"}></img></td>
                                    <td>{ goods.gName}({goods.gType})</td>
                                </tr>
                                <tr><td><hr></hr></td><td><hr></hr></td></tr>
                                {
                                    goods.gInterest != 0 ?
                                        <tr>
                                            <td><img src={ process.env.PUBLIC_URL+"/savings.png"}></img></td>
                                            <td>연 { goods.gInterest}%</td>
                                        </tr>
                                        :null
                                }
                                {
                                    goods.gPeriod != 0 ?
                                        <tr>
                                            <td><img src={ process.env.PUBLIC_URL+"/savings.png"}></img></td>
                                            <td>최대 { goods.gPeriod}년</td>
                                        </tr>
                                        :null
                                }
                                {
                                    goods.gMPay != 0 ?
                                        <tr>
                                            <td><img src={ process.env.PUBLIC_URL+"/savings.png"}></img></td>
                                            <td>월 { goods.gMPay}납입</td>
                                        </tr>
                                        :null
                                }
                                {
                                    goods.gAge != 0 ?
                                        <tr>
                                            <td><img src={ process.env.PUBLIC_URL+"/savings.png"}></img></td>
                                            <td>만 { goods.gAge}세부터 수령</td>
                                        </tr>
                                        :null
                                }
                                {
                                    goods.gMaturity != 0 ?
                                        <tr>
                                            <td><img src={ process.env.PUBLIC_URL+"/savings.png"}></img></td>
                                            <td>만기 { goods.gMaturity}개월</td>
                                        </tr>
                                        :null
                                }
                               <tr><td><br></br><br></br></td></tr>
            </tbody>)
    }

<tbody>
	{
	goods.gInterest != 0? [태그]:null
}
</tbody>

위의 방식으로 데이터가 0일 경우 태그를 생성하지 않았다.