[FE]문제 랜덤 구현(2)

지난번 포스팅에서 지적했던 문제 제한 관련해 보안한 부분의 코드들을 리뷰하려고 한다. 먼저 문제를 가져오는 useEffect부분을 보면 아래와 같다.(branch/7)

 

   useEffect(() => {

    fetch('http://localhost:3001/sample')

      .then(res => res.json())

      .then((data) => {

        // 데이터를 가져온 후, 제한된 개수만큼 자르고 섞음

        const limitedData = data.slice(0, limit);

        const shuffledData = shuffleArray(limitedData);

        setData(shuffledData);

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, [limit]);

이전 코드와 달리 data를 먼저 slice로 가공을 해서 원하는 문제 길이만큼 제한을 두고 limitedData 변수에 담아고 해당 배열을 담아두고 shuffleArray 함수에 limitedData를 넣어서 우리가 지정한 문제들만 문제를 섞어낼 수 있게 하는 것이다. 전체코드는 아래 더보기를 참고하자.

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

export default function LabExam() {
  const [data, setData] = useState([]);
  const [limit, setLimit] = useState(5);

  useEffect(() => {
    fetch('http://localhost:3001/sample')
      .then(res => res.json())
      .then((data) => {
        // 데이터를 가져온 후, 제한된 개수만큼 자르고 섞음
        const limitedData = data.slice(0, limit);
        const shuffledData = shuffleArray(limitedData);
        setData(shuffledData);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, [limit]);

  // Fisher-Yates 알고리즘을 사용하여 배열을 랜덤하게 섞는 함수
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  return (
    <div>
      <h2>Test</h2>
      <select onChange={(e) => { setLimit(parseInt(e.target.value)); }}>
        <option value={5}>5</option>
        <option value={10}>10</option>
        <option value={15}>15</option>
        <option value={20}>20</option>
      </select>
      <Link to="/">back</Link>
      <ol>
        {data.map((item) => (
          <li key={item.id}><p>{item.question}</p>{item.options}</li>
        ))}
      </ol>
    </div>
  );
}

이제 문제를 제한해서 랜덤으로 섞는 것은 가능 해졌다. 하지만 아직 버튼을 구현하지 못햇다. 먼저 버튼 태그를 생성하고 버튼 태그에서 문제가 랜덤으로 섞이는 핸들링 함수를 만들어야 한다. 이제 suffleArray함수를 useEffect에서 벗어날 수 있게 되었다. suffleArray함수를 제거한 useEffect와 핸들링 함수는 아래와 같다.

 

  useEffect(() => {

    fetch('http://localhost:3001/sample')

      .then(res => res.json())

      .then((data) => {

        // 데이터를 가져온 후, 제한된 개수만큼 자른다.

        setData(data.slice(0, limit));

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, [limit]);

 

// 문제를 섞는 함수를 호출하는 버튼 클릭 핸들러

  const handleShuffle = () => {

    const shuffledData = shuffleArray(data);

    setData([...shuffledData]); // 새로운 배열로 설정하여 React가 업데이트를 감지할 수 있게 함

  };

 

그렇다면 이제 우리는 useEffect에 있는 shuffleArray함수를 제거하고 원하는 문제 개수만 추출할 수 있게만 하면 된다. 전체 코드는 아래 더보기를 참고하라.

import React, { useState, useEffect } from "react";

import { Link } from "react-router-dom";

export default function LabExam() {

  const [data, setData] = useState([]);

  const [limit, setLimit] = useState(5);

  useEffect(() => {

    fetch('http://localhost:3001/sample')

      .then(res => res.json())

      .then((data) => {

        // 데이터를 가져온 후, 제한된 개수만큼 자르고 섞음

        // const limitedData = data.slice(0, limit);

        // const shuffledData = shuffleArray(limitedData);

        // setData(shuffledData);

        // 데이터를 가져온 후, 제한된 개수만큼 자른다.

        setData(data.slice(0, limit));

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, [limit]);

  // Fisher-Yates 알고리즘을 사용하여 배열을 랜덤하게 섞는 함수

  function shuffleArray(array) {

    for (let i = array.length - 1; i > 0; i--) {

      const j = Math.floor(Math.random() * (i + 1));

      [array[i], array[j]] = [array[j], array[i]];

    }

    return array;

  }

  // 문제를 섞는 함수를 호출하는 버튼 클릭 핸들러

  const handleShuffle = () => {

    const shuffledData = shuffleArray(data);

    setData([...shuffledData]); // 새로운 배열로 설정하여 React가 업데이트를 감지할 수 있게 함

  };

  return (

    <div>

      <h2>Test</h2>

      <button onClick={handleShuffle}>Shuffle</button> {/* 문제 섞기 버튼 */}

      <select onChange={(e) => { setLimit(parseInt(e.target.value)); }}>

        <option value={5}>5</option>

        <option value={10}>10</option>

        <option value={15}>15</option>

        <option value={20}>20</option>

      </select>

      <Link to="/">back</Link>

      <ol>

        {data.map((item) => (

          <li key={item.id}><p>{item.question}</p>{item.options}</li>

        ))}

      </ol>

    </div>

  );

}

이렇게 제한된 문제안에서 문제를 섞어내는 코드를 작성하였다.