비지터 패턴 예제로 쉽게 이해하기

의도와 해결하는 문제

의도: 객체 구조의 요소에 수행할 연산을 표현합니다. 비지터는 연산 대상 요소의 클래스를 바꾸지 않고 새 연산을 정의하게 합니다. GoF(Gang of Four) 책에 실린 행동 패턴 중 하나입니다.

그림 그리기 프로그램에 Circle, Rectangle, Group 세 도형 클래스가 있다고 가정해 봅시다. 시간이 지나면서 전체 넓이 계산, SVG 내보내기, JSON 내보내기, 도형 개수 세기, 겹침 검사 같은 많은 연산이 필요해집니다. 모든 연산이 모든 도형 클래스의 메서드가 되면, 도형 클래스는 도형이라는 것과 상관없는 코드로 비대해지고 새 연산마다 전부 수정해야 합니다.

비지터 패턴에서는 각 연산이 모든 도형 타입에 대한 코드를 담은 클래스 하나(넓이 비지터, SVG 비지터)가 됩니다. 도형에는 일반적인 메서드 accept 하나만 있으면 됩니다. 연산을 추가하려면 새 비지터 하나를 작성하면 되고 도형 클래스는 바뀌지 않습니다.

구조와 참여자

accept가 필요한 이유: TypeScript, Java, C#에서 메서드 호출은 호출 대상 객체의 타입으로 구현을 고릅니다(싱글 디스패치). accept 호출은 요소 타입으로 디스패치하고, 그 안의 visitor.visitCircle(this) 같은 호출은 비지터 타입으로 디스패치합니다. 둘이 합쳐져 더블 디스패치가 됩니다.

TypeScript 구현

비지터 인터페이스는 반환 타입에 대해 제네릭이므로, 어떤 비지터는 숫자를 계산하고 다른 비지터는 문자열을 만들 수 있습니다.

interface ShapeVisitor<R> {
  visitCircle(c: Circle): R;
  visitRectangle(r: Rectangle): R;
  visitGroup(g: Group): R;
}
interface Shape {
  accept<R>(visitor: ShapeVisitor<R>): R;
}

class Circle implements Shape {
  constructor(readonly radius: number) {}
  accept<R>(v: ShapeVisitor<R>) { return v.visitCircle(this); }
}
class Rectangle implements Shape {
  constructor(readonly width: number, readonly height: number) {}
  accept<R>(v: ShapeVisitor<R>) { return v.visitRectangle(this); }
}
class Group implements Shape {
  constructor(readonly children: Shape[]) {}
  accept<R>(v: ShapeVisitor<R>) { return v.visitGroup(this); }
}

class AreaVisitor implements ShapeVisitor<number> {
  visitCircle(c: Circle) { return Math.PI * c.radius ** 2; }
  visitRectangle(r: Rectangle) { return r.width * r.height; }
  visitGroup(g: Group): number {
    return g.children.reduce((sum, child) => sum + child.accept(this), 0);
  }
}

class SvgVisitor implements ShapeVisitor<string> {
  visitCircle(c: Circle) { return '<circle r="' + c.radius + '"/>'; }
  visitRectangle(r: Rectangle) { return '<rect width="' + r.width + '" height="' + r.height + '"/>'; }
  visitGroup(g: Group): string { return "<g>" + g.children.map((c) => c.accept(this)).join("") + "</g>"; }
}

const drawing = new Group([new Circle(1), new Rectangle(2, 3), new Group([new Rectangle(1, 1)])]);
console.log(drawing.accept(new AreaVisitor()).toFixed(2)); // 10.14
console.log(drawing.accept(new SvgVisitor()));
// <g><circle r="1"/><rect width="2" height="3"/><g><rect width="1" height="1"/></g></g>

도형 개수 세기 같은 세 번째 연산은 ShapeVisitor<number>를 구현하는 새 클래스가 됩니다. 도형 클래스는 하나도 바뀌지 않습니다.

TypeScript의 대안: 유니온 타입과 switch

TypeScript에서는 판별 유니온과 완전한 switch가 더 적은 코드로 같은 이점을 많이 줍니다. 케이스가 빠지면 컴파일러가 오류를 알려 주므로 비지터 인터페이스가 주던 안전성을 대신합니다.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number }
  | { kind: "group"; children: Shape[] };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "rect": return s.width * s.height;
    case "group": return s.children.reduce((sum, c) => sum + area(c), 0);
    default: {
      const unreachable: never = s; // compile error if a kind is not handled
      return unreachable;
    }
  }
}

console.log(area({ kind: "group", children: [{ kind: "rect", width: 2, height: 3 }] })); // 6

새 연산은 새 함수가 됩니다. 이 방식은 JSON이나 구문 트리 같은 일반 데이터에 어울리며, 많은 TypeScript 코드베이스가 클래스 기반 비지터 대신 사용합니다.

언제 쓰고 언제 쓰지 말아야 할까

• 요소 클래스 집합이 안정적이고 구문 트리의 평가, 출력, 타입 검사, 최적화처럼 서로 관련 없는 연산이 많이 필요할 때 사용합니다.
• 연산 코드를 한곳에 모으고 싶을 때 사용합니다. SVG 내보내기 전체가 여러 클래스에 흩어지지 않고 하나의 비지터에 있습니다.
• 심볼 테이블이나 누적 합계처럼 비지터가 구조를 돌며 상태를 쌓아야 할 때 사용합니다.
• 요소 타입이 자주 바뀐다면 사용하지 않습니다. 변경이 모든 비지터로 파급됩니다.
• 요소가 적고 연산이 단순하다면 사용하지 않습니다. 클래스의 메서드나 switch를 쓴 함수가 읽기 더 쉽습니다.
• 비지터는 보통 요소의 데이터에 접근해야 하므로 필드를 공개하게 될 수 있다는 점에 유의하세요.

실제 사용 사례

• Babel 플러그인은 비지터입니다. Identifier나 CallExpression처럼 노드 타입 이름의 메서드를 가진 객체이며, @babel/traverse가 구문 트리를 순회하며 이를 호출합니다.
• ESLint 규칙은 노드 타입을 키로 하는 비지터 메서드 객체를 반환하고, ESLint가 순회 중에 이를 호출합니다.
• Python의 ast.NodeVisitor와 ast.NodeTransformer 클래스는 visit_Name처럼 노드 클래스 이름을 딴 visit_ 메서드를 호출합니다.
• Files.walkFileTree와 함께 쓰이는 Java의 java.nio.file.FileVisitor는 파일 트리의 각 디렉터리와 파일에 대한 콜백을 받습니다.

관련 패턴