TypeScript와 ES6로 Enum처럼 코드 집합 관리하기: 공통 메서드와 타입 안전성

JavaScript(ES6)와 TypeScript를 사용하다 보면 Java의 enum처럼 상수 집합을 관리하고 싶을 때가 많습니다. 특히 code와 label 같은 속성을 가진 객체를 여러 개 정의하고, 공통 메서드(예: findByCode)를 추가하면서도 타입 안전성을 유지하려면 어떻게 해야 할까요? 이번 글에서는 React 환경에서 발생한 에러를 해결하며 찾은 최적의 방법을 공유합니다.

 

 

문제 상황: React와 TypeScript에서 코드 집합 사용하기

class Code {
  constructor(public code: string, public label: string) {}
  getCode() { return this.code; }
  getLabel() { return this.label; }
}

export const PartnerCareerCodes = Object.freeze({
  NONE: new Code("NONE", "없음"),
  BEGINNER: new Code("BEGINNER", "1년 미만"),
  PRO: new Code("PRO", "1년 이상"),
});

 

React 컴포넌트에서 PartnerCareerCodes.BEGINNER.getLabel()로 렌더링하려 했더니 두 가지 문제가 생겼습니다:

• React 에러: "Objects are not valid as a React child" - 객체를 직접 렌더링할 수 없음.
• TypeScript 에러: "Property 'BEGINNER' does not exist on type..." - 타입 정의가 부족해 속성 접근 불가.

 

 

해결 과정

1. React에서 객체 렌더링 문제

첫 번째 에러는 React가 객체(Code 인스턴스)를 직접 렌더링할 수 없기 때문에 발생했습니다. 이를 해결하려면 문자열을 추출해야 합니다.

function MyComponent() {
  return <div>{PartnerCareerCodes.BEGINNER.getLabel()}</div>; // "1년 미만"
}

 

getLabel()로 문자열을 반환하니 에러가 사라졌습니다. 또는 toString()을 추가해 더 유연하게 처리할 수도 있습니다.

class Code {
  constructor(public code: string, public label: string) {}
  getCode() { return this.code; }
  getLabel() { return this.label; }
  toString() { return `${this.label} (${this.code})`; }
}

function MyComponent() {
  return <div>{PartnerCareerCodes.BEGINNER.toString()}</div>; // "1년 미만 (BEGINNER)"
}

 

 

2. 공통 메서드 추가: findByCode

각 코드 집합에 findByCode 같은 유틸리티 메서드를 공통으로 추가하고 싶었습니다. 처음엔 다음과 같이 시도했습니다.

function createCodeSet(codes) {
  return Object.freeze({
    ...codes,
    findByCode(code) {
      return Object.values(codes).find(item => item.getCode() === code) || null;
    }
  });
}

export const PartnerCareerCodes = createCodeSet({
  NONE: new Code("NONE", "없음"),
  BEGINNER: new Code("BEGINNER", "1년 미만"),
  PRO: new Code("PRO", "1년 이상"),
});

 

 

 

이렇게 하면 PartnerCareerCodes.findByCode("BEGINNER")로 원하는 Code 객체를 찾을 수 있습니다. 하지만 TypeScript에서 문제가 생겼습니다.

 

 

3. TypeScript 타입 문제

PartnerCareerCodes.BEGINNER에 접근하려 했더니 에러가 발생했습니다:

 

Property 'BEGINNER' does not exist on type 'Readonly<{ findByCode(code: string): any; }>'.

 

TypeScript가 createCodeSet의 반환 타입을 제대로 추론하지 못해 BEGINNER 같은 속성을 잃어버린 겁니다. 이를 해결하려면 타입을 명시해야 합니다.

 

 

첫 번째 시도: 개별 인터페이스 정의

각 코드 집합별로 타입을 정의하는 방식입니다:

interface PartnerCareerCodeSet {
  NONE: Code;
  BEGINNER: Code;
  PRO: Code;
  findByCode(code: string): Code | null;
}

export const PartnerCareerCodes: PartnerCareerCodeSet = createCodeSet({
  NONE: new Code("NONE", "없음"),
  BEGINNER: new Code("BEGINNER", "1년 미만"),
  PRO: new Code("PRO", "1년 이상"),
});

 

동작은 잘 됐지만, 코드 집합이 많아질수록 StatusCodeSet, UserRoleCodeSet 같은 인터페이스를 반복 정의해야 해서 코드량이 늘어났습니다.

 

 

최적화: 제네릭 타입 사용

반복을 줄이기 위해 제네릭을 도입했습니다.

interface CodeSet<T extends Record<string, Code>> {
  findByCode(code: string): Code | null;
  [key: string]: Code | ((code: string) => Code | null);
}

function createCodeSet<T extends Record<string, Code>>(codes: T): Readonly<T & CodeSet<T>> {
  return Object.freeze({
    ...codes,
    findByCode(code: string) {
      return Object.values(codes).find(item => item.getCode() === code) || null;
    }
  });
}

export const PartnerCareerCodes = createCodeSet({
  NONE: new Code("NONE", "없음"),
  BEGINNER: new Code("BEGINNER", "1년 미만"),
  PRO: new Code("PRO", "1년 이상"),
});

 

• T는 입력 객체의 구조를 나타내고, CodeSet<T>로 공통 메서드를 추가.
• TypeScript가 NONE, BEGINNER, PRO를 자동으로 인식.

 

 

최종 코드

class Code {
  constructor(public code: string, public label: string) {
    Object.freeze(this);
  }

  getCode(): string { return this.code; }
  getLabel(): string { return this.label; }
  toString(): string { return `${this.label} (${this.code})`; }
}

interface CodeSet<T extends Record<string, Code>> {
  findByCode(code: string): Code | null;
  [key: string]: Code | ((code: string) => Code | null);
}

function createCodeSet<T extends Record<string, Code>>(codes: T): Readonly<T & CodeSet<T>> {
  return Object.freeze({
    ...codes,
    findByCode(code: string) {
      return Object.values(codes).find(item => item.getCode() === code) || null;
    }
  });
}

export const StatusCodes = createCodeSet({
  ACTIVE: new Code("ACTIVE", "활성"),
  INACTIVE: new Code("INACTIVE", "비활성"),
  PENDING: new Code("PENDING", "대기"),
});

export const PartnerCareerCodes = createCodeSet({
  NONE: new Code("NONE", "없음"),
  BEGINNER: new Code("BEGINNER", "1년 미만"),
  PRO: new Code("PRO", "1년 이상"),
});

 

 

React에서 사용 예시:

import React from 'react';
import { PartnerCareerCodes } from './codes';

function MyComponent() {
  return (
    <div>
      <p>{PartnerCareerCodes.BEGINNER.getLabel()}</p>
      <p>{PartnerCareerCodes.findByCode("PRO")?.getLabel() || "없음"}</p>
    </div>
  );
}

 

 

배운 점

1. 불변성: Object.freeze로 코드 집합을 보호해 런타임 오류 줄이기.
2. React 렌더링: 객체는 직접 렌더링 불가, 문자열로 변환 필요.
3. TypeScript 효율화: 제네릭으로 타입 정의 중복 줄이기.

 

이 접근법은 코드량을 줄이면서도 타입 안전성과 확장성을 유지합니다. 더 간단한 방법으로 as const를 사용할 수도 있지만, 공통 메서드가 많아지면 제네릭이 더 유리합니다.

 

---

기능확장

values() 라는 객체 목록을 리턴하는 것이 필요해 추가해 보았습니다.

 

// 코드 집합의 타입 정의
interface CodeSet<T extends Record<string, Code>> {
  findByCode(code: string): Code | null;
  values(): Code[];   // 이 부분 추가
  [key: string]: Code | ((code: string) => Code | null) | (() => Code[]); // 동적 키 허용
}

// 코드 집합 생성 팩토리
export function createCodeSet<T extends Record<string, Code>>(
  codes: T
): Readonly<T & CodeSet<T>> {
  return Object.freeze({
    ...codes, // 원래 객체의 속성을 그대로 유지
    findByCode(code: string) {
      return Object.values(codes).find((item) => item.code === code) || null;
    },
    values() {
      return Object.values(codes); // 모든 Code 객체를 배열로 반환
    },
  });
}

 

이렇게 하면 다음처럼 활용할 수 있습니다.

{partnerCareerCodes.values().map((item: Code) => (
  <MenuItem key={item.code} value={item.code}>
    {item.label}
  </MenuItem>
))}