$$config title: [ 앱구현 ] 기능 구현 keywords: - 좌우 버튼 - 좌우 순환 - 외부데이터 연결 - 랜덤 표시 $$ [ 기본 바탕 ](https://codepen.io/SeonHo-/pen/wvyRwjL?editors=0010) # 좌우 버튼 ```js . * . 1. 이전버튼 기능 const chagneToPrevWiseSaying = () => { setWiseSayingsIndex(wiseSayingsIndex - 1); }; 2. 이전버튼 기능 const chagneToNextWiseSaying = () => { setWiseSayingsIndex(wiseSayingsIndex + 1); }; . [ return 영역 ] .

1. 이전버튼 모양새, 클릭 2. 다음버튼 모양새, 클릭

``` # 좌우 순환 ```js . * . const chagneToPrevWiseSaying = () => { const newIndex = wiseSayingsIndex - 1 >= 0 ? wiseSayingsIndex - 1 : wiseSayings.length - 1; setWiseSayingsIndex(newIndex); }; const chagneToNextWiseSaying = () => { const newIndex = wiseSayingsIndex + 1 < wiseSayings.length ? wiseSayingsIndex + 1 : 0; setWiseSayingsIndex(newIndex); }; . * . ``` - 변수를 만들고 그 변수안에 삼항연산자를 넣는다. 그렇게 만들어진 변수를 setWise~에 넣는다. # 외부데이터 연결 ```js const chagneToAnotherRandomWiseSaying = () => { const randomIndex = Math.floor(Math.random() * wiseSayings.length); setWiseSayingsIndex(randomIndex); }; ``` - Math.random() * 124 => Math.random() * wiseSayings.length # 랜덤표시 ```js . * . const loadWiseSayings = async () => { const data = await fetch( "https://jhs512.github.io/wise_saying_server/data.json" ); const dataJson = await data.json(); setWiseSayings(dataJson); 『 const randomIndex = Math.floor(Math.random() * dataJson.length); setWiseSayingsIndex(randomIndex); 』 . * . ``` - loadWiseSayings 안에 코드를 넣어 처음 화면이 1이 아닌 다른것으로 랜덤하게 표시할 수 있게 함

게시글 상세