[typescript] 매핑된 타입으로 동기화

boolean 값을 가진 객체를 사용

값이 true인 프로퍼티는 값의 변경여부를 체크하도록 함

interface Props {
  treeItem: Tree;
  sameDepthTreeNames: Map<TreeType, string[]>;
  setRootTree: Dispatch<SetStateAction<Tree>>
  setMethodType: Dispatch<SetStateAction<MethodTypeForRecursivTreeItem>>
  setMethodTargetTree: Dispatch<SetStateAction<Tree>>
  setContextEvent: Dispatch<SetStateAction<React.BaseSyntheticEvent<MouseEvent> | null>>
}

const NEED_CHECK_EQUAL_PROPERTY: {[k in keyof Props]: boolean} = {
  treeItem: true,
  sameDepthTreeNames: true,
  setRootTree: true,
  setMethodType: true,
  setMethodTargetTree: true,
  setContextEvent: true,
}

const checkEqual = (prev: Readonly<Props>, next: Readonly<Props>): boolean => {
  let k: keyof Props;
  for (k in prev) {
    if (prev[k] !== next[k] && NEED_CHECK_EQUAL_PROPERTY[k]) {
      return false;
    }
  }
  return true;
}

/**
 * drawer 너비 조정 시 재귀함수로 생성된 모든 RecursivTreeItem가 rerender됨
 * 성능문제를 해결하기 위해 React.memo 사용 
 */
export default React.memo(RecursivTreeItem, checkEqual)

배열을 사용

모든 프로퍼티의 값의 변경여부를 체크

const NEED_CHECK_EQUAL_PROPERTY: (keyof Props)[] = [
  'treeItem',
  'sameDepthTreeNames',
  'setRootTree',
  'setMethodType',
  'setMethodTargetTree',
  'setContextEvent',
]

links

social