$$config title: [리액트 React] 명언게시판 keywords: - IT - 리액트 $$ # 1. 변수 선언 및 데이터 받아오기 ```js const [wiseSayings, setWiseSayings] = useState([]); const [wiseSayingsIndex, setWiseSayingsIndex] = useState(0); const [index, setIndex] = useState([]); const loadWiseSayings = async () => { const data = await fetch( "https://jhs512.github.io/wise_saying_server/data.json" ); const dataJson = await data.json(); setWiseSayingsIndex(Math.floor(Math.random() * dataJson.length)); setWiseSayings(dataJson); }; useEffect(loadWiseSayings, []); if (wiseSayings.length === 0) { return ( <>

로딩중...

); } ``` 리액트는 무조건 두번씩 실행됨 -> 비동기식으로 작동하기 때문 ex) - 데이터 받아오는 작업을 걸어놓고 다른일을 함 - 다른작업이 완료되기 전에 데이터 작업이 끝났으나 진행한 일은 통신을 받기전에 한 것 - 다시한번 데이터 받아오기 진행 통신하는 작업에서 랜덤변수로 index 값을 받을 거임 (초기는 0이지만 실행 중 랜덤 수를 받음) # 2. 함수 작업 ```java const chagneToAnotherRandomWiseSaying = () => { const randomIndex = Math.floor(Math.random() * wiseSayings.length); setWiseSayingsIndex(randomIndex); firework(); }; const prevPage = () => { if (wiseSayingsIndex === 0) { setWiseSayingsIndex(wiseSayings.length - 1); } else { setWiseSayingsIndex(wiseSayingsIndex - 1); } }; const nextPage = () => { if (wiseSayingsIndex === wiseSayings.length - 1) { setWiseSayingsIndex(0); } else { setWiseSayingsIndex(wiseSayingsIndex + 1); } }; ``` - chagneToAnotherRandomWiseSaying : 랜덤으로 인덱스 값을 부여 - prevPage :전페이지로 넘어감 받은 인덱스로 조절, 만약 0이면 끝번호로 넘기며 버튼 순환 방식으로 진행 - nextPage :다음페이지로 넘어감 받은 인덱스로 조절, 만약 끝번호 이면 0으로 넘기며 버튼 순환 방식으로 진행 # 3. 화면 출력 ```jsx return ( <>

오늘의 명언

[{wiseSayings[wiseSayingsIndex].id}]

{wiseSayings[wiseSayingsIndex].content}

- {wiseSayings[wiseSayingsIndex].author} -

); } ``` CSS문법 필요 $$codepen https://cdpn.io/pen/debug/poapXjy?authentication_hash=dXkqBqaXQPzM $$ https://codepen.io/denist2322/pen/poapXjy