[리액트 React] 명언게시판

1. 변수 선언 및 데이터 받아오기

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 (
      <>
        <div className="flex-1 flex items-center justify-center">로딩중...</div>
      </>
    );
  }

리액트는 무조건 두번씩 실행됨 -> 비동기식으로 작동하기 때문
ex)

• 데이터 받아오는 작업을 걸어놓고 다른일을 함
• 다른작업이 완료되기 전에 데이터 작업이 끝났으나 진행한 일은 통신을 받기전에 한 것
• 다시한번 데이터 받아오기 진행

통신하는 작업에서 랜덤변수로 index 값을 받을 거임 (초기는 0이지만 실행 중 랜덤 수를 받음)

2. 함수 작업

  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. 화면 출력

return (
    <>
      <div class="fixed top-0 bg-[#5CD1E5] w-full">
        <div className="text-white p-[10px_10px_7px_10px] text-center">
          오늘의 명언
        </div>
      </div>

      <div className="flex-1 flex items-center justify-center">
        <div className="max-w-sm px-3">
          <div className="flex-1 flex items-center justify-center">
            [{wiseSayings[wiseSayingsIndex].id}]
          </div>
          <br />
          <div>{wiseSayings[wiseSayingsIndex].content}</div>
          <div className="text-center mt-2 text-gray-500 text-sm">
            - {wiseSayings[wiseSayingsIndex].author} -
          </div>
        </div>
      </div>
      <div class="fixed bottom-0 bg-[#5CD1E5] w-full flex justify-between">
        <button
          onClick={prevPage}
          className="text-white p-[15px_15px_10px_15px] cursor-pointer"
        >
          <i class="fa-solid fa-angle-left"></i>
        </button>
        <button
          onClick={chagneToAnotherRandomWiseSaying}
          className="text-white p-[15px_15px_10px_15px] cursor-pointer"
        >
          <i class="fa-solid fa-rotate-left"></i>
        </button>
        <button
          onClick={nextPage}
          className="text-white p-[15px_15px_10px_15px] cursor-pointer"
        >
          <i class="fa-solid fa-angle-right"></i>
        </button>
      </div>
    </>
  );
}

CSS문법 필요

결과물 : https://cdpn.io/pen/debug/poapXjy?authentication_hash=dXkqBqaXQPzM

See the Pen 2022.05.27 by 소망 (@denist2322) on CodePen.