Effective Typescript - 아이템18

Item18 - 매핑된 타입을 사용하여 값을 동기화하기

산점도(Scatter plot)을 그리는 컴포넌터의 타입을 모델링 해보겠습니다.

interface ScatterProps{

	// Data
    xs:number[];
    ys:number[];
    
    // Display
    xRange:[number,number];
    yRange:[number,number];
    color:string;
    
    //Events
    onClick:(x:number,y:number,index:number) => void;
}

데이터나 디스플레이가 변경되면 차트를 다시 그려야하지만 이벤트 핸들러가 변경된경우 그럴 필요가 없습니다. 따라서 최적화를 해야하는데 두가지 방법으로 해보겠습니다.

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;
}

함수는 먼저 oldProps 객체의 프로퍼티들을 반복하여, 각각의 프로퍼티들이 새로운 프로퍼티와 일치하는지 확인합니다. 프로퍼티가 일치하지 않는 경우, 'onClick'이 아닌 다른 프로퍼티가 변경되었다면 컴포넌트를 다시 렌더링해야 하므로 true를 반환합니다.

 

'onClick' 프로퍼티는 컴포넌트의 렌더링에 직접적인 영향을 미치지 않는 경우가 많으므로, 이 프로퍼티가 변경되더라도 컴포넌트를 다시 렌더링할 필요가 없습니다. 

따라서 'onClick' 프로퍼티가 변경된 경우에는 컴포넌트를 다시 렌더링하지 않고 false를 반환합니다.

이 방법을 사용하면 차트가 정확하지만 너무 자주 리렌더링이 발생할 가능성이 있습니다.

 

function shouldUpdate(
	oldProps:ScatterProps,
    newProps:ScatterProps
){
	return(
    oldProps.xs !== newProps.xs ||
    oldProps.ys !== newProps.ys ||
    oldProps.xRange !== newProps.xRange ||
    oldProps.yRange !== newProps.yRange ||
    oldProps.color !== newProps.color
    // onClick는 체크하지 않습니다.
    )
}

위 두번째 방법은 불필요하게 너무 자주 리렌더링되는 문제를 해결했습니다. 하지만 차트를 다시 그려야만 하는경우 프로퍼티가 누락되는일이 생길수있습니다.

 

두방법 모두 최선이아니며, 타입 체커가 대신 할 수 있게 하는 것이 좋습니다.

interface ScatterProps {
  // The data
  xs: number[]
  ys: number[]

  // Display
  xRange: [number, number]
  yRange: [number, number]
  color: string

  // Events
  onClick: (x: number, y: number, index: number) => void
}

interface ScatterProps {
  // ...
  onDoubleClick: () => void
} // 새로운 프로퍼티 추가

const REQUIRES_UPDATE: { [k in keyof ScatterProps]: boolean } = {
  //  ~~~~~~~~~~~~~~~ Property 'onDoubleClick' is missing in type
  // COMPRESS
  xs: true,
  ys: true,
  xRange: true,
  yRange: true,
  color: true,
  onClick: false,
  // onDoubleClick:false, 를 추가하면 에러 해결
  // END
}

[k in keyof ScatterProps]은 타입 체커에게 REQUIRES_UPDATE 가 ScatterProps와 동일한 속성을 가져야 한다는 정보를 제공합니다.

따라서 추후 새로운 속성을 추가하거나 속성이 변경됐을때 수정이 필요하다는 오류를 발생시켜 개발자가 쉽게 인지 할수 있습니다.