[이슈] useCallback의 empty array 조건

켄도 라이브러리를 사용하다가 grid의 cell을 custom으로 가공할 일이 생겼다

 

예시 코드처럼 이벤트를 받아 ActivityReportButton이라는 컴포넌트를 리턴한다.

그런데 문제는 한칸의 cell만 변경하더라도 모든 cell이 리턴 작업을 수행한다는 것이다.

 

useCallback으로 이를 해결할 수 있다.

사실 함수는 바뀌지 않으므로 매번 동일하게 ActivityReportButton을 리턴하면 된다.

다만 ActivityReportButton 컴포넌트 내부 로직에 state가 있기 때문에, state가 변경되는 cell만 컴포넌트가 리렌더링 된다.

useCallback의 두번째 인자로 빈 배열을 설정하면, 항상 바로 직전의 함수를 수행한다.

(즉, state가 변하지 않는 이상 mount 시점의 함수만을 기억하고 실행한다.)