getWinNumbers가 여러번 실행되지 않는데 업데이트된건가요?

Question

콘솔로 getWinNumbers를 찍어보았는데 componentDidMount때 딱 한 번 실행되고 재실행되지 않는 것 같습니다. 제가 코드를 강의와 똑같이 작성한다고 한건데, 혹시 잘못 작성해서 의도와 다르게 작성된 부분이 있어서 그런 것인지 아니면 버전이 업데이트된 것인지 궁금해서 질문 남깁니다! const React = require ( ' react ' ); const { useState , useRef , useEffect } = React ; const Ball = require ( ' ./Ball ' ); function getWinNumbers () { console . log ( ' getWinNumbers ' ); const candidate = Array ( 45 ) . fill () . map ( ( v , i ) => i + 1 ); const shuffle = []; while ( candidate . length > 0 ) { shuffle . push ( candidate . splice ( Math . floor ( Math . random () * candidate . length ) , 1 )[ 0 ]); } const bonusNumber = shuffle [ shuffle . length - 1 ]; const winNumbers = shuffle . slice ( 0 , 6 ) . sort ( ( p , c ) => p - c ); return [ ... winNumbers , bonusNumber ]; } const LottoHooks = () => { const [ winNumbers , setWinNumbers ] = useState ( getWinNumbers ) ; const [ winBalls , setWinBalls ] = useState ([]) ; const [ bonus , setBonus ] = useState ( null ) ; const [ redo , setRedo ] = useState ( false ) ; const timeouts = useRef ([]) ; useEffect ( () => { for ( let i = 0 ; i < winNumbers . length - 1 ; i ++ ) { timeouts . current [ i ] = setTimeout ( () => { setWinBalls ( ( prevWinBalls ) => [ ... prevWinBalls , winNumbers [ i ]]) ; }, ( i + 1 ) * 1000 ) ; } timeouts . current [ 6 ] = setTimeout ( () => { setBonus ( winNumbers [ 6 ]) ; setRedo ( true ) ; }, 7000 ) ; return () => { // componentWillUnmount timeouts . current . forEach ( ( v ) => { clearTimeout ( v ) ; } ) ; }; }, [ timeouts . current ]) ; const onClickRedo = () => { setWinNumbers ( getWinNumbers ()) ; setWinBalls ([]) ; setBonus ( null ) ; setRedo ( false ) ; timeouts . current = [] ; }; return ( <> < div > 당첨 숫자 < div id = " 결과창 " > { winBalls . map ( ( v ) => < Ball key = { v } number = { v } /> ) } < div > 보너스! { bonus && < Ball number = { bonus } /> } { redo && < button onClick = { onClickRedo } > 한 번 더! } ) ; } module . exports = LottoHooks ;

제로초(조현영) · Answer

useState ( getWinNumbers ) 이렇게 하면 한 번만 실행됩니다. 제 코드는 useState(getWinNumbers()); 였습니다. 강좌에서는 useMemo로 해결했지만 또 다른 해결 방법이 useState ( getWinNumbers ); 입니다.