Search

재사용 가능한 Icon 컴포넌트

Status
UPLOADING
Date
2024/10/16
Tags
React Native Expo

1. 개요

기존의 아이콘 컴포넌트는 Ionicons 만 사용 가능하도록 설계되었습니다.
export interface IconProps { name: keyof typeof Ionicons.glyphMap; color?: string; size?: number; style?: StyleProp<ViewStyle>; } const Icon = ({name, color, size = 24, style}: IconProps,) => { const fontSize = 24; return ( <> {name && ( <Ionicons name={name} size={size || fontSize} color={color} style={style}/> )} </> ) } export default Icon
Java
복사
그래서 다음과 같이 Icon을 사용할 때, Ionicons 에 등록되지 않은 이름이라면 실행되지 않았습니다.
<Icon name={'left'} size={18} color={'#FFFFFF'} /> // 'left' 에서 에러 발생
Java
복사
이를 확장성 있는 설계로 리팩토링 해보겠습니다.

2. 리팩토링

export type IconLibrary = 'Ionicons' | 'MaterialIcons' | 'FontAwesome'; export interface IconProps { library: IconLibrary; name: string; color?: string; size?: number; style?: StyleProp<ViewStyle>; } const Icon = ({ library, name, color, size = 24, style }: IconProps) => { const renderIcon = () => { switch (library) { case 'Ionicons': return <Ionicons name={name as keyof typeof Ionicons.glyphMap} size={size} color={color} style={style} />; case 'MaterialIcons': return <MaterialIcons name={name as keyof typeof MaterialIcons.glyphMap} size={size} color={color} style={style} />; case 'FontAwesome': return <FontAwesome name={name as keyof typeof FontAwesome.glyphMap} size={size} color={color} style={style} />; default: return null; } }; return <>{renderIcon()}</>; }; export default Icon;
Java
복사
속성들을 조금 더 자세히 알아보겠습니다.
name={name as keyof typeof Ionicons.glyphMap}
glyphMap아이콘 이름과 실제 글리프 코드 사이의 맵을 의미합니다. 즉, 각 아이콘 라이브러리에는 여러 아이콘들이 있고, 아이콘의 이름을 텍스트로 주면 내부적으로 그 아이콘에 해당하는 글리프 코드로 변환하여 아이콘을 렌더링합니다.
StyleProp<ViewStyle>
StyleProp은 React Native에서 스타일을 적용할 때 사용하는 타입입니다. React Native에서 스타일은 기본적으로 JavaScript 객체 형태로 표현되지만, 다양한 형태의 스타일을 허용하기 위해 타입 정의가 좀 더 복잡합니다.
ViewStyle은 React Native의 View 컴포넌트에 적용 가능한 스타일 속성을 정의한 타입입니다. 이것은 width, height, margin, padding과 같은 속성들을 포함합니다.

Reference