인프런 커뮤니티 질문&답변

답변 감사드립니다.

추가적으로 질문이 있습니다.

setWinNumbers가 바로 호출되어서 덮어씌워졌을 것이다 라고 말씀해주셔서 console.log()를 이용해 아래와 같이 로그를 찍어봤습니다.

console.log('%cfirst','background: red');
const [winNumbers, setWinNumbers] = useState(getWinNumbers);
console.log(winNumbers);
console.log('%csecond', 'background: blue');
...

setWinNumbers가 호출된 적이 없지만 winNumber가 정상적인 값을 가지고 있습니다.

추가적으로,

const [winNumbers, setWinNumbers] = useState();

와 같이 작성했을 경우에는 에러가 발생했습니다.

제가 무언가 놓치고 있다면 알려주시면 감사하겠습니다.

전체적인 소스 코드는 아래와 같습니다.

import React, { useCallback, useEffect, useRef, useState } from 'react';
import * as _ from 'lodash';
import Ball from './Ball';

const getWinNumbers = () => {
  console.log('getWinNumbers() 함수가 호출되었습니다.');
  const sevenNumbers = _.chain(_.range(1, 46))
    .shuffle()
    .take(7)
    .value();

  const bonusNumber = sevenNumbers[sevenNumbers.length - 1];
  const sortedLottoNumbers = sevenNumbers.slice(0, 6).sort((a, b) => a - b);

  return [...sortedLottoNumbers, bonusNumber];
}

const Lotto = () => {

  console.log('%cfirst','background: red');
  const [winNumbers, setWinNumbers] = useState(getWinNumbers);
  console.log(winNumbers);
  console.log('%csecond', 'background: blue');
  const [winBalls, setWinBalls] = useState([]);
  const [bonus, setBonus] = useState(null);
  const [redo, setRedo] = useState(false);
  const timeouts = useRef([]);

  useEffect(() => {
    console.log('%ctimeouts useEffect 시작', 'background: green');
    _.chain(_.range(6))
      .map(i => setTimeout(() => {
        setWinBalls(prevWinBalls => [...prevWinBalls, winNumbers[i]]);
      }, 1000 * (i + 1)))
      .each(timeout => timeouts.current.push(timeout))
      .value();

    timeouts.current.push(setTimeout(() => {
      setRedo(true);
      setBonus(winNumbers[winNumbers.length - 1]);
    }, 7000));

    return () => {
      console.log('%ctimeouts useEffect 리턴', 'background: green');
      timeouts.current.forEach(clearTimeout);
    }
  }, [timeouts.current])

  const onClickRedo = useCallback(() => {
    console.log('redo 이벤트 발생!');
    setWinNumbers(getWinNumbers());
    setWinBalls([]);
    setBonus(null);
    setRedo(false);
    timeouts.current = [];
  }, [winNumbers]);

  return (
    <>
      <div>
        <div>당첨 숫자</div>
        {winBalls.map(num => <Ball number={num} key={num}></Ball>)}
      </div>

      <div>보너스</div>
      {bonus && <Ball number={bonus}></Ball>}
      {redo && <button onClick={onClickRedo}>한 번 더!</button>}
    </>
  );
};

export default Lotto;

아, 제가 착각했습니다. 아래 기능이라서 useState에 함수를 넣으면 그 함수가 실행됩니다. 보통은 비동기 작업을 한 후에 state를 만들 때 실행됩니다.

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

추가로 getWinNumbers를 useMemo로 감쌀 필요도 없어집니다. 처음 한 번만 실행돼서요.

많은 도움이 됐습니다. 답변 감사드립니다~