제로초님 강의 감사합니다. 근데 useMemo에서요!!

Question

const   getWinNumbersMemo   =   useMemo (()  =>   getWinNumbers (), []);    const  [ winNumbers ,  setWinNumbers ]  =   useState ( getWinNumbersMemo );  state에서 초기에 memo함수로 받아서 getWinNumbers함수가 렌더링이 처음 한번만 되 자나요 const   onClickRedo   =   useCallback (()  =>  {      setWinBalls ([]);      setWinNumbers ( getWinNumbers ()); 근데 여기서는 memo가 안된 getWinNumbers()를 썻는데 getWinNumbers가 한번만 렌더링 되는건 잘 이해가 안가네요 처음 useState에서 메모가 안된 초기함수를 받았을땐 getWinNumbers가 계속 호출되다가 초기함수를 memo된 함수로 받았을때는 왜 여기 부분도 같이 렌더링이 한번만 되나요??? 여기는 메모함수를 받지 않앗는데요      setBonus ( null );      setRedo ( false );      timeouts .current  =  [];   }, [ winNumbers ]); 강의는 정말 너무 좋아요~

제로초(조현영) · Answer

정리하자면 setWinNumbers에 getWinNumbers()를 넣었다고 해도 코드가 useState(getWinNumbersMemo)라면 리렌더링 시 getWinNumbers()가 호출되는 곳이 없으므로 getWinNumbers는 실행되지 않습니다.

제로초(조현영) · Answer

onClickRedo 함수는 클릭을 할 때, 그 때만 호출됩니다. 그 때 내부에 있는 getWinNumbers도 호출되는 것이고요. 그래서 따로 처리를 하지 않아도 클릭할 때만 getWinNumbers가 호출됩니다. useState에 useMemo를 써준 것은 컴포넌트 리렌더링 시마다 useState의 getWinNumbers가 다시 호출되기 때문입니다. 그래서 여기서는 다시 호출되는 것을 막으려고 useMemo를 쓴 것이고요.

송지훈 · Answer

제로초님 감사합니다.!! 좀 이따 생각을 좀 정리해봐야겟네요 ㅎㅎ.. 오늘 하루도 수고하셨습니다. 내일도 좋은 하루 보내십쇼!!

제로초(조현영) · Answer

아 이해했습니다. 메모한 상태에서 onClickRedo를 클릭할 때 setWinNumbers(getWinNumbers())를 하면 setWinNumbers를 호출했으니 getWinNumbers()가 한 번 호출된 후 리렌더링이 되는데요. 리렌더링 때부터는 어차피 useState에 memo된 getWinNumbersMemo가 들어있으니 getWinNumbers가 호출되는 일이 없습니다. useState(getWinNumbersMemo)이지 useState(getWinNumbers())가 아니니까요. 개발자도구 Component 메뉴로 보시면 좀 더 정확한데요. onClickRedo를 했을 때 winNumbers랑 memo해둔 getWinNumbersMemo랑 다른 값입니다. 즉, memo된 값은 처음 렌더링될 때만 사용되는 값이고, 그 다음 setWinNumbers할 때부터는 memo된 기존 값은 아예 사용되지 않습니다. 개발자도구에서 Component 메뉴를 켜놓으시고 Lotto 컴포넌트를 클릭한 후 hooks에서 memo 값과 state값을 비교해보세요.

송지훈 · Answer

그 부분은 이해했습니다. 제가 말을 잘 못해서 그런지  핀트가 어긋나는거 같네요ㅠㅠ const [winNumber, setWinNumber] = useState(getWinNumbers()) 메모를 안한 useState의 초기값일때  onClickRedo setWinNumbers(getWinNumbers()) 각각 6번씩 getWinNumbers 함수가 6번씩 호출이 되자나요. 그런데 const [winNumber, setWinNumber] = useState(memoGetWinNumbers()) 메모를 한 useState의 초기값일때 ( 이 때는 memo를 했으니 getWinNumbers()함수 한번 호출) onClickRedo setWinNumbers(getWinNumbers()) onClickRedo의 setWinNumbers(getWinNumbers()) 메모를 안한 getWinNumbers()가 호출 되므로 redo가 호출 될때 getWinNumbers()가 6번 호출되어야하는거 아닌가요? 귀찮게 해드려서 죄송합니다. 그리고 고맙습니다.

제로초(조현영) · Answer

useState는 리렌더링이 발생하는 상황이면 어떤 상황이든지 계속 호출됩니다. bonus가 바뀌어도,  redo나 winBalls가 바뀌어도, winNumbers가 바뀌어도 매번 호출됩니다. 그래서 memo를 하는 것이고요.

송지훈 · Answer

위의 상황 모두에서 일단은 onClickRedo는 한번만 실행되요~ 제가 질문을 잘못했네요. onClickRedo가 한번만 실행되는건 아는데 왜 jsx 38번째 줄의 useState(getWinNumbers())가 왜 계속 호출될까요 onClickRedo의 setWinNumbers(getWinNumbers())가 그대로인데 winNumbers가 memo된 상태에서 메모안된 getWinNumbers로 다시 바꿧으니 콘솔이 계속 나와야하는거 아닌가요?

제로초(조현영) · Answer

38번째 줄이 어떤 상황에서 호출되는지 불분명합니다. onClickRedo 안에 콘솔로그 넣어보세요.

송지훈 · Answer

처음 useState의 useMemo를 적용 전에는 첫 렌더링때와 한번 더 눌렀을때 둘다 콘솔로그가 계속 나오고 /// onClickRedo 함수는 클릭을 할 때, 그 때만 호출됩니다. 그 때 내부에 있는 getWinNumbers도 호출되는 것이고요. 그래서 따로 처리를 하지 않아도 클릭할 때만 getWinNumbers가 호출됩니다. /// onClickRedo 함수는 클릭을 할 때, 그 때만 호출이되는거면 여기서도 한번만 찍혀야 되는거 아닌가용? 제가 혹시 이해 못한 부분이 있다면 지적 부탁드립니당. ================================================================ useState에 첫 데이터에 useMemo를 적용햇을때 onClickRedo의 setWinNumbers(getWinNumbers())가 그대로인데 winNumbers가 memo된 상태에서 메모안된 getWinNumbers로 다시 바꿧으니 콘솔이 계속 나와야하는거 아닌가요? 왜 하나만 찍히는지 .... 제가 혹시 이해 못한 부분이 있다면 지적 부탁드립니당. 감사합니다.!!