TIL90. Adapter Pattern

B를 A처럼 변경해서 A로 사용하자.

여행갈 때 전압이 다른 곳에서 기계를 충전하려면 전압을 바꿔주는 어댑터가 필요하다.
프로그래밍에서도 다른 클래스의 인터페이스를 클라이언트에서 사용하고자 하는 경우, 즉, 다른 인터페이스로의 변환이 필요할 때 어댑터가 필요하다.이때 사용할 수 있는 것이 어댑터 패턴이다.

예시

text를 입력하면 text를 그대로 프린트를 하는 코드

class Printer {
  constructor() {
    this.textArr = [];
  }
  
  pushText(text) {
    this.textArr.push(text);
  }
  
  print() {
    return this.textArr.join('');
  }
}

const instance = new Printer();
instance.pushText('Hello');
instance.pushText('World');

instance.print(); // 'HelloWorld'

만약 이 코드에서 텍스트마다 '#'를 붙여주는 수정사항이 있을 경우에는 어떡할까?

class HashTagPrinter {
  constructor() {
    this.textArr = [];
  }
  
  pushText(text) {
    this.textArr.push(text);
  }
  
  printWithHash() {
    return this.textArr.map(text => `#${text}`).join('');
  }
}

const instance = new HashTagPrinter();
instance.pushText('Hello');
instance.printWithHashTag(); // #Hello

만약 위의 예제와 달리 좀 더 복잡하고 긴 코드에서라면 비효율적인 방법일 것이다.

-> adapter pattern를 사용해서 관리해보자.

adapter pattern

class Adapter {
  
  constructor(printer) {
    this.printer = printer;
  }
  
  pushText(text) {
    this.printer.pushText(text);
  }
  
  print() {
    return this.printer.printWithHash();
  }
}

const instance = new Adapter(new HashTagPrinter());
instance.pushText(Hello);
instance.pushText(World);
// #Hello#World

실제로 사용하기

서버에서 프로토콜 버퍼로 받아온 타입을 클라이언트 타입으로 바꿔줘야 하는 경우가 생겼다.
처음에는 컨버팅하지 않고 클라이언트 타입으로 바로 바꿔줬다. 하지만 나중에 다른 컴포넌트에서도 사용할 경우가 많아진다면 일일히 코드를 작성해줘야하기 때문에 좋은 코드가 아니라는 소리를 들었다.
그래서 이때 adapter pattern을 사용하면 사용하고 있는 모든 컴포넌트를 고치지 않고 adapter pattern만 수정하면 되기 때문에 유용하다.

타입 코드

// 서버 타입
type ServerType = {
  	typeCode: string;
  	identifier: string;
  	state: string;
};

//클라이언트 타입
type ClientType = {
	type: string;
  	id: string;
  	status: string;
}; 

전체 코드

// 변경 전
...생략
axios.get("url").then(({data}) => {
  setDataContainer(data.items.map((item: ServerType) => ({
    type: item.typeCode,
    id: item.identifier,
    status: item.state
  })),
 );
});

//변경 후
...생략
axios.get("url").then(({data}) => {
  setDataContainer(data.items.map(convert)
 );
});

const convert = (item: ServerType): ClientType => {
  return {
    type: item.type,
    id: item.identifier,
    status: item.state
  }
};