Item 18 매핑된 타입을 사용하여 값을 동기화하기

The Code

리액트 컴포넌트와 같이 데이터나 디스플레이 속성이 변경되면 다시 그려야 한다고 했을 때, 새로운 속성이 추가되면 다시 그리도록 할텐데, 실패에 닫힌 방법과 실패에 열린 방법을 사용할 수 있다.

다음은 실패에 닫힌 최적화 기법이다.

function shouldUpdate(
  oldProps: ScatterProps,
  newProps: ScatterProps,
) {
  let k: keyof ScatterProps
  for (k in oldProps) {
    if (oldProps[k] !== newProps[k]) {
      if (k !== 'onClick') return true
    }
  }
  return false
}

• keyof는 Item 54에.

이렇게 처리하는 것을 '보수적(conservative) 접근법', 또는 '실패에 닫힌(fail close) 접근법' 이라고 한다. 이 접근법은 데이터가 정확하지만 너무 자주 그려질 가능성이 있다.

다음은 실패에 열린 최적화 기법이다. 거기에 타입 체커를 사용하도록 했다.

const REQUIRES_UPDATE: { [k in keyof ScatterProps]: boolean } = {
  xs: true,
  ys: true,
  xRange: true,
  yRange: true,
  color: true,
  onClick: false,
}

function shouldUpdate(
  oldProps: ScatterProps,
  newProps: ScatterProps,
) {
  let k: keyof ScatterProps
  for (k in oldProps) {
    if (oldProps[k] !== newProps[k] && REQUIRES_UPDATE[k]) {
      return true
    }
  }
  return false
}

Summary

• 매핑된 타입을 사용해서 관련된 값과 타입을 동기화하도록 하자.

• 인터페이스에 새로운 속성을 추가할 때, 선택을 강제하도록 매핑된 타입을 고려해야 한다.