리액트 무한 리렌더링 버그

문제 상황

처음에 이렇게 작성했는데 앱이 무한대로 계속 리렌더링돼서 작동을 멈췄다.

handleSubmit(message)

여기에 괄호가 있으니 클릭하기 전에도 이벤트 핸들러로 전달한 함수가 바로 그냥 실행이 된 것 같다.

무한 리렌더링이 일어난 이유(과정)

1. 앱 실행하자 마자

handleSubmit(message)

실행됨

2. handleSubmit 함수 안에 있는

searchCocktails // cocktail DB API 호출해서 cocktails state 검색 결과에 맞게 업데이트

실행되고, cocktails (칵테일 목록을 담고 있는 state object) state가 업데이트 됨
3. 상태가 업데이트 되었으므로 앱이 리렌더링됨
4. 다시 1번으로

handleSubmit(message)

실행됨

해결 방법

handleSubmit(message)

을 익명 함수로 감싸서, 앱을 실행하자 마자 이 함수가 실행되지 않게, 클릭 이벤트 발생 시에만 실행되도록 했다.