Deps
우리가 입력을 할때마다 state가 변경된다. 다행히도 useEffect가 있으니깐 이럴때 마다 API 반복적으로 호출되는 문제등을 막을 수 있다.
두 개의 state의 변화가 일어나고 있다.
첫 번째는 검색창에서 keyword state가
두 번째는 이후에 clickme 가 클릭되면 counter state 가 말이다.
그치만 input 창에 입력되어서 keyword state 만 변할때 render 가 되길 원하지
input을 마치고 keyword state은 더이상 건들게 없는데
counter state 에 변화가 생겨서 전체가 리랜더링 되는건 싫은 거다.
두번째 인자가 [] 이렇게 비어있는 경우에는 첫번째 인자의 함수가 한번만 실행되고 말았다.
하지만 두번째 인자에 state를 넣어주면, 그 state가 변화할때만 첫번째 인자의 함수가 실행되는 기능을 수행한다.
정리하면
1. 한번만 실행하거나
2. 하나의 state 의 변화만 감지해서 리랜더링 하거나
두개의 state가 변화에 따라 개별적으로 리랜더링 된다.
counter state의 변화에 관계없이 keyword state 에만 리랜더링 한다.
그렇기에 처음에 배열의 empty arrary를 두었을때 첫번째 인자의 코드가 한번만 실행됐던 이유이다!
react 가 지켜볼게 아무것도 없으니까 한번만 실행되는 거다.
언제 코드가 실행될지를 결정할 수 있게 됐다.
