challenge_3_Debugging unnecessary renderings

(작성중인 포스트 입니다)

useEffect에 두번째 인자로 특정 값을 watch하게 만들면, 해당 값이 변경될때만 hook 내부의 함수가 실행되는 줄 알았고, 최적화를 잘 해두었다고 생각했었다.

그러나, useEffect는 컴포넌트가 마운트된 시점에도 작동을 하기 때문에, 이러한 initial running을 막아야 했다.

(위 사진에는 표시가 되지 않았지만, 렌더링이 발생할수록 컴포넌트 외곽선이 점차 붉게(...) 물들도록 옵션을 설정하였고, 옅은 주황색까지 표시가 되었던 상태이다.)

참고 자료 : how-to-prevent-useeffect-from-running-on-mount-in-react

디버깅 후, 아래와 사진과 같이
불필요한 action 발생과 그에 따른 렌더링을 줄여 원하는 결과를 얻을 수 있었다.