팩토리 패턴을 이용하여 동적 탭 메뉴 리스트 만들기

export interface TabeMenuListType {
	link: string;
	options: Union<typeof TabMenus>;
	title: string;
}

export const feedTabMenus: TabeMenuListType[] = [
	{
		link: '/feeds?options=TOP',
		options: 'TOP',
		title: 'TOP',
	},
	{
		link: '/feeds?options=MYFEED',
		options: 'MYFEED',
		title: 'MYFEED',
	},
	{
		link: '/feeds?options=ALL',
		options: 'ALL',
		title: 'ALL',
	},
];

<div className={styles.tap_menu_container}>
    <TabMenu list={feedTabMenus} options={query.options} />
</div>

 

객체 배열을 이용하여 list에 따라 탭메뉴를 만드는 코드인데 중복 코드를 줄이는 흔한 방법이다. 하지만 이렇게 사용 할때 정적으로 리스트를 생성하기 때문에 동적으로 리스트를 생성 해야 할때 문제가 발생한다.

 

예를 들어 /accounts/:email 에서 탭메뉴를 구현할 때 email 이라는 동적인 pathValue가 존재 한다면 이것을 link로 만드는것은 한계가 있다.

 

팩토리 패턴을 이용하여 동적 탭 메뉴 리스트 만들기

export interface TabeMenuListType {
    link: string;
    options: Union<typeof TabMenus>;
    title: string;
}

export const makeTabMenuItem = (item: TabeMenuListType) => {
    return item;
};

// TabMenu 컴포넌트를 호출하는 컴포넌트에서 동적으로 탭 메뉴 생성하기
<TabMenu
        list={[
            makeTabMenuItem({
                link: `/accounts/${email}?options=MYFEED`,
                options: 'MYFEED',
                title: '작성 피드',
            }),
            makeTabMenuItem({
                link: `/accounts/${email}?options=MYSCHEDULE`,
                options: 'MYSCHEDULE',
                title: '작성 일정',
            }),
        ]}
        options={query.options}
></TabMenu>

TabMenu 컴포넌트를 호출하는 컴포넌트에서 동적으로 탭 메뉴 생성 할 수 있게 된다.