[React.JS] 리액트 하위 컴포넌트 함수 호출시 여러번 호출 이슈.

원인은 간단하다.

보통 map 함수로 레이아웃 컴포넌트로 생성된 여러개의 해당 함수를 호출하는데,

이때 특정 event을 하는 함수가 내장되어 있다면 개발자가 보기엔 1개지만,

map함수로 호출된 갯수만큼 동일한 이름의 함수가 생성된다.

그러므로 해당 event를 일으키는 것을 외부로 꺼내서 호출하는 방식으로 사용하면 한번만 사용하게 된다.

 

counter 내 increase, decrease 함수가 있다면 map으로 30개를 counter를 복제했을 경우,

increase 호출 시 30번 호출하게 되는 것.

그래서 이를 바깥으로 꺼내 counter에서 호출해서 사용하는 방법을 사용하면,

해당 이슈가 해결된다.