이 글에서는 Tailwind CSS 소스 코드의 DefaultMap 클래스를 분석합니다. 존재하지 않는 키에 대한 기본값을 생성할 수 있는 맵입니다. 재계산을 방지하기 위해 생성된 기본값이 맵에 추가됩니다.

/**
 * A Map that can generate default values for keys that don't exist.
 * Generated default values are added to the map to avoid recomputation.
 */
export class DefaultMap extends Map {
  constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
  }

  get(key: T): V {
    let value = super.get(key)

    if (value === undefined) {
      value = this.factory(key, this)
      this.set(key, value)
    }

    return value
  }
}

JavaScript에는 Map API가 있지만 DefaultMap은 없습니다. 이 DefaultMap은 Tailwind CSS 소스 코드에서 Map을 확장하는 맞춤 클래스입니다.

이 코드를 이해해 봅시다.

constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
}

DefaultMap은 팩토리 함수를 기대하는 생성자가 있는 클래스입니다. super()는 상위 클래스의 생성자를 호출합니다. 이 경우 이는 Map API이고 팩토리 함수의 두 번째 매개변수는 self: DefaultMap입니다. 이는 Map 인스턴스에 액세스할 수 있음을 의미합니다.

DefaultMap은 어떻게 초기화되나요?

이 DefaultMap이 초기화되는 예를 찾아보겠습니다. design-system.ts는 DefaultMap의 사용법을 보여줍니다.

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );

여기(variant) =>parseVariant(variant, designSystem)은 키가 존재하지 않는 경우 기본값을 추가하는 팩토리 메소드가 됩니다.

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }

parseVariant 함수가 반환한 값입니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에 사용되는 고급 코드베이스 아키텍처 개념을 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

또한 웹 개발 및 기술 문서 작성 서비스도 제공합니다. 자세한 내용은 [email protected]으로 문의하세요!

참조:

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L40

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

4. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.ts#L511-L516