[TIL]7. React-9기 - 로또번호 생성기

간단한 과제를 하면서 겪었던 문제를 적어볼까 한다.

로또 번호 생성기를 만드는 과제였는데

1~45까지 랜덤번호를 6개 생성하고 중복검사를하여 중복된 수가가 없게 만드는 내용이었다.
처음에 짰던 코드는 if를 사용하여 만들었다.

• 코드

function generateLottoNumbers() {
    let arrContainer = [];
  for (i = 0; i < 6; i++) {
      const ranNum = Math.floor(Math.random() * 45) + 1;

      arrContainer.includes(ranNum) || arrContainer.push(ranNum);
    // 중복검사 - arrContainer에 ranNum이 있으면 true반환하므로 arrContainer.push(ranNum)
    // 실행이 안됨 false이면 ranNum그래로 push진행.
    }
  return arrContainer;

하지만 이렇게 했을때 for문은 6번만 실행되기에 arrContainer.includes(ranNum)에서 true가 되어버리는 만큼 숫자가 나오질 않는다.

그래서 생각한게 굳이 6번만 돌릴필요가 없지 않나? 배열에 6개만 채워지면 되는거니까 while문으로 배열을 6개만 채울때까지 돌리면 되도록 수정하였다.

function generateLottoNumbers() {
    let arrContainer = [];
  	while (arrContainer.length < 6) {
      const ranNum = Math.floor(Math.random() * 45) + 1;

      arrContainer.includes(ranNum) || arrContainer.push(ranNum);
    }
  return arrContainer;

이제 추가로 이전 번호를 저장하고 현재 번호랑 비교하도록 하는 코드를 추가하는데 어디다가 저장하고 출력은 어떻게 해야하는지 감이 안잡혔다. 구글의 검색을 좀 해봐서 힌트를 얻었다.

let prevnumbers = [];
  genBtn.addEventListener("click", function () {
    let numbers = generateLottoNumbers();
    output.textContent = numbers.join(", ");
    // console.log(prevnumbers) 
    prenum.textContent = prevnumbers.join(", "); 
    prevnumbers = [...numbers];
    // console.log(prevnumbers)
  });

나는 함수 안에서만 하려고 했는데 클릭 이벤트 함수에서 넣으면 된다는걸 늦게 알았다. 또한 출력 순서도 중요했다.

• 결과
  

이런 간단한 과제도 좀 힘들어 하다니 반성이 필요할때다.