🎬 시작하기 전에: 왜 타입스크립트로 모바일 앱을 만들까?

야, 솔직히 말해서 자바스크립트로만 React Native 개발하다가 타입스크립트 도입하면 처음엔 좀 귀찮아. 😅 근데 프로젝트가 커지면서 "아, 이거 진짜 필요했구나" 싶은 순간이 온다니까?

내가 실제로 겪은 일인데, 어느 날 API 응답 구조가 바뀌었어. 그런데 자바스크립트로만 작성된 코드에서는 앱을 실행해봐야만 에러를 발견할 수 있었지. 근데 타입스크립트를 쓰면? 코드 작성하는 순간 바로 빨간 줄이 쫙 그어지면서 "야, 여기 타입 안 맞아!" 하고 알려줘. 이게 얼마나 고마운지 몰라! 🎯

특히 재능넷 같은 플랫폼에서 모바일 앱 개발 프로젝트를 진행할 때, 클라이언트에게 "타입스크립트로 개발합니다"라고 하면 신뢰도가 확 올라가더라고. 왜냐면 코드 품질과 유지보수성이 보장되니까! 💪

🛠️ React Native 프로젝트에 타입스크립트 세팅하기

자, 이제 본격적으로 시작해볼까? 새 프로젝트를 만드는 방법부터 알려줄게.

📦 새 프로젝트 생성

요즘은 React Native CLI가 타입스크립트를 기본으로 지원해서 진짜 쉬워졌어:

npx react-native init MyAwesomeApp --template react-native-template-typescript

이 명령어 하나면 타입스크립트가 완전히 설정된 프로젝트가 뿅! 하고 생성돼. 😎

⚙️ tsconfig.json 설정 파헤치기

프로젝트 루트에 있는 tsconfig.json 파일이 타입스크립트의 두뇌야. 내가 실전에서 쓰는 설정을 공유해줄게:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "jsx": "react-native",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js"
  ]
}

🎯 핵심 옵션 설명

🎨 React Native 컴포넌트 타입 정의하기

자, 이제 진짜 재미있는 부분이야! React Native 컴포넌트에 타입을 어떻게 입히는지 알아보자. 🎭

🧩 기본 컴포넌트 Props 타입 정의

가장 기본적인 버튼 컴포넌트를 만들어볼게. 실전에서 정말 많이 쓰는 패턴이야:

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

// Props 타입 정의
interface CustomButtonProps {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  backgroundColor?: string;
  textColor?: string;
}

// 함수형 컴포넌트 with 타입
const CustomButton: React.FC<CustomButtonProps> = ({
  title,
  onPress,
  disabled = false,
  backgroundColor = '#007AFF',
  textColor = '#FFFFFF',
}) => {
  return (
    <TouchableOpacity
      style={[
        styles.button,
        { backgroundColor },
        disabled && styles.disabled,
      ]}
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={[styles.text, { color: textColor }]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  disabled: {
    opacity: 0.5,
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
  },
});

export default CustomButton;

여기서 주목할 포인트들이 있어! 🎯

🔄 useState와 타입 추론

useState 훅을 쓸 때 타입스크립트가 진짜 빛을 발해. 예제 보면 바로 이해될 거야:

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

// 사용자 정보 타입 정의
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;
}

const UserForm: React.FC = () => {
  // 타입 명시적 지정
  const [user, setUser] = useState<User>({
    id: 0,
    name: '',
    email: '',
  });

  // 타입 추론 (간단한 경우)
  const [isLoading, setIsLoading] = useState(false); // boolean으로 자동 추론
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  // 배열 타입
  const [users, setUsers] = useState<User[]>([]);

  const handleNameChange = (text: string) => {
    setUser(prev => ({
      ...prev,
      name: text, // 타입 안전하게 업데이트
    }));
  };

  return (
    <View>
      <TextInput
        value={user.name}
        onChangeText={handleNameChange}
        placeholder="이름을 입력하세요"
      />
      {errorMessage && <Text>{errorMessage}</Text>}
    </View>
  );
};

🎣 useRef와 타입 안전성

useRef는 좀 까다로운데, 제대로 알면 엄청 유용해:

import React, { useRef, useEffect } from 'react';
import { TextInput, View } from 'react-native';

const FocusExample: React.FC = () => {
  // TextInput ref 타입 지정
  const inputRef = useRef<TextInput>(null);

  // 숫자 값을 저장하는 ref
  const countRef = useRef<number>(0);

  useEffect(() => {
    // null 체크 후 사용
    if (inputRef.current) {
      inputRef.current.focus();
    }

    // 값 업데이트
    countRef.current += 1;
  }, []);

  return (
    <View>
      <TextInput
        ref={inputRef}
        placeholder="자동 포커스됨"
      />
    </View>
  );
};

여기서 useRef<TextInput>(null)처럼 제네릭으로 타입을 지정하고 초기값을 null로 주면, ref.current는 TextInput | null 타입이 돼. 그래서 사용 전에 null 체크를 해야 해! 🔍

🌐 Navigation 타입 정의하기

React Navigation은 React Native에서 필수인데, 타입 정의가 좀 복잡해 보일 수 있어. 근데 한 번만 제대로 설정하면 진짜 편해! 😊

📱 Stack Navigator 타입 정의

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

// 스택 네비게이터의 모든 화면과 파라미터 정의
type RootStackParamList = {
  Home: undefined; // 파라미터 없음
  Profile: { userId: string; userName: string }; // 필수 파라미터
  Settings: { theme?: 'light' | 'dark' }; // 선택적 파라미터
  Detail: { itemId: number };
};

// Stack Navigator 생성
const Stack = createNativeStackNavigator<RootStackParamList>();

// 각 화면의 Props 타입 정의
type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
type ProfileScreenProps = NativeStackScreenProps<RootStackParamList, 'Profile'>;

// Home 화면 컴포넌트
const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
  const navigateToProfile = () => {
    // 타입 안전한 네비게이션!
    navigation.navigate('Profile', {
      userId: '123',
      userName: 'John Doe',
    });
    
    // 이렇게 하면 에러! 파라미터 타입이 안 맞음
    // navigation.navigate('Profile', { userId: 123 }); // ❌
  };

  return (
    <View>
      <CustomButton title="프로필 보기" onPress={navigateToProfile} />
    </View>
  );
};

// Profile 화면 컴포넌트
const ProfileScreen: React.FC<ProfileScreenProps> = ({ route, navigation }) => {
  // route.params가 타입 안전!
  const { userId, userName } = route.params;

  return (
    <View>
      <Text>User ID: {userId}</Text>
      <Text>Name: {userName}</Text>
    </View>
  );
};

🗂️ Tab Navigator와 Drawer Navigator

탭이나 드로어 네비게이터도 똑같은 방식으로 타입을 정의할 수 있어:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';

type TabParamList = {
  Home: undefined;
  Search: { query?: string };
  Notifications: undefined;
  Profile: { userId: string };
};

const Tab = createBottomTabNavigator<TabParamList>();

// 복합 네비게이터 타입 (Stack + Tab)
type RootStackParamList = {
  MainTabs: NavigatorScreenParams<TabParamList>;
  Modal: { content: string };
};

// 이렇게 하면 중첩된 네비게이터도 타입 안전!

🔌 API 통신과 타입 정의

모바일 앱에서 API 통신은 필수지? 여기서 타입스크립트가 진짜 빛을 발해! 🌟

📡 API 응답 타입 정의

// API 응답 타입 정의
interface ApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
  error?: string;
}

// 사용자 데이터 타입
interface UserData {
  id: number;
  username: string;
  email: string;
  profile: {
    avatar: string;
    bio: string;
    followers: number;
  };
  createdAt: string;
}

// 게시물 데이터 타입
interface Post {
  id: number;
  title: string;
  content: string;
  author: UserData;
  likes: number;
  comments: Comment[];
  createdAt: string;
}

interface Comment {
  id: number;
  text: string;
  author: UserData;
  createdAt: string;
}

// API 호출 함수
const fetchUser = async (userId: string): Promise<ApiResponse<UserData>> => {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error('Failed to fetch user');
  }
};

// 컴포넌트에서 사용
const UserProfile: React.FC = () => {
  const [user, setUser] = useState<UserData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadUser = async () => {
      try {
        const response = await fetchUser('123');
        if (response.success) {
          setUser(response.data); // 타입 안전!
        } else {
          setError(response.error || 'Unknown error');
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error');
      } finally {
        setLoading(false);
      }
    };

    loadUser();
  }, []);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error}</Text>;
  if (!user) return <Text>No user found</Text>;

  return (
    <View>
      <Text>{user.username}</Text>
      <Text>{user.email}</Text>
      <Text>Followers: {user.profile.followers}</Text>
    </View>
  );
};

🛡️ Axios와 타입 안전성

Axios를 쓴다면 이렇게 타입을 정의할 수 있어:

import axios, { AxiosResponse } from 'axios';

// Axios 인스턴스 생성
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 타입 안전한 API 클래스
class UserAPI {
  static async getUser(userId: string): Promise<UserData> {
    const response: AxiosResponse<ApiResponse<UserData>> = 
      await api.get(`/users/${userId}`);
    return response.data.data;
  }

  static async updateUser(
    userId: string,
    updates: Partial<UserData>
  ): Promise<UserData> {
    const response: AxiosResponse<ApiResponse<UserData>> = 
      await api.patch(`/users/${userId}`, updates);
    return response.data.data;
  }

  static async deleteUser(userId: string): Promise<void> {
    await api.delete(`/users/${userId}`);
  }
}

// 사용 예시
const updateUserProfile = async () => {
  try {
    const updatedUser = await UserAPI.updateUser('123', {
      username: 'newUsername', // 타입 체크됨!
      // invalidField: 'test', // ❌ 에러! UserData에 없는 필드
    });
    console.log('Updated:', updatedUser);
  } catch (error) {
    console.error('Update failed:', error);
  }
};

여기서 Partial<UserData>는 UserData의 모든 필드를 선택적으로 만들어줘. 업데이트할 때 일부 필드만 보내도 되니까 완전 유용하지! 👍

🎭 고급 타입 패턴과 유틸리티 타입

이제 좀 더 고급 기술로 넘어가볼까? 실전에서 정말 유용한 패턴들이야! 🔥

🔧 유틸리티 타입 활용하기

타입스크립트가 제공하는 유틸리티 타입들은 진짜 꿀이야. 하나씩 살펴보자:

// 1. Partial - 모든 속성을 선택적으로
interface UserSettings {
  theme: 'light' | 'dark';
  notifications: boolean;
  language: string;
  fontSize: number;
}

// 일부만 업데이트할 때
const updateSettings = (updates: Partial<UserSettings>) => {
  // theme만 업데이트하거나, notifications만 업데이트 가능
};

updateSettings({ theme: 'dark' }); // ✅
updateSettings({ fontSize: 16, language: 'ko' }); // ✅

// 2. Pick - 특정 속성만 선택
type UserBasicInfo = Pick<UserData, 'id' | 'username' | 'email'>;

const displayBasicInfo = (user: UserBasicInfo) => {
  // id, username, email만 사용 가능
  console.log(user.username);
  // console.log(user.profile); // ❌ 에러!
};

// 3. Omit - 특정 속성 제외
type UserWithoutSensitiveData = Omit<UserData, 'email' | 'profile'>;

const publicUserData: UserWithoutSensitiveData = {
  id: 1,
  username: 'john_doe',
  createdAt: '2024-01-01',
  // email과 profile은 제외됨
};

// 4. Record - 키-값 쌍 타입 정의
type ThemeColors = Record<'primary' | 'secondary' | 'background', string>;

const lightTheme: ThemeColors = {
  primary: '#007AFF',
  secondary: '#5856D6',
  background: '#FFFFFF',
};

// 5. Readonly - 불변 객체
type ImmutableUser = Readonly<UserData>;

const user: ImmutableUser = {
  id: 1,
  username: 'john',
  email: 'john@example.com',
  profile: { avatar: '', bio: '', followers: 0 },
  createdAt: '2024-01-01',
};

// user.username = 'jane'; // ❌ 에러! 읽기 전용

🎨 조건부 타입과 타입 가드

조건부 타입은 좀 어려워 보이지만, 알고 나면 엄청 강력해:

// 조건부 타입 예제
type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false

// 실전 예제: API 응답 타입 자동 추론
type ApiEndpoint = 
  | { type: 'user'; data: UserData }
  | { type: 'post'; data: Post }
  | { type: 'comment'; data: Comment };

type ExtractData<T extends ApiEndpoint['type']> = 
  Extract<ApiEndpoint, { type: T }>['data'];

type UserDataType = ExtractData<'user'>; // UserData
type PostDataType = ExtractData<'post'>; // Post

// 타입 가드 함수
const isUser = (data: any): data is UserData => {
  return 'username' in data && 'email' in data;
};

const isPost = (data: any): data is Post => {
  return 'title' in data && 'content' in data;
};

// 사용 예시
const handleApiResponse = (response: ApiEndpoint) => {
  if (response.type === 'user') {
    // 여기서 response.data는 자동으로 UserData 타입!
    console.log(response.data.username);
  } else if (response.type === 'post') {
    // 여기서는 Post 타입!
    console.log(response.data.title);
  }
};

🎯 React Native 스타일링과 타입

스타일링할 때도 타입 안전성을 유지할 수 있어! 이게 진짜 개발 경험을 확 바꿔줘. 🎨

💅 StyleSheet와 타입

import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';

// 스타일 타입 정의
interface Styles {
  container: ViewStyle;
  title: TextStyle;
  image: ImageStyle;
  button: ViewStyle;
  buttonText: TextStyle;
}

// 타입 안전한 스타일 생성
const styles = StyleSheet.create<Styles>({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#FFFFFF',
    // invalidProperty: 'test', // ❌ 에러!
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 16,
  },
  image: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

// 동적 스타일 생성 함수
const createButtonStyle = (
  backgroundColor: string,
  size: 'small' | 'medium' | 'large'
): ViewStyle => {
  const sizeMap = {
    small: { paddingVertical: 8, paddingHorizontal: 16 },
    medium: { paddingVertical: 12, paddingHorizontal: 24 },
    large: { paddingVertical: 16, paddingHorizontal: 32 },
  };

  return {
    backgroundColor,
    ...sizeMap[size],
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  };
};

🎨 테마 시스템 구축하기

테마 시스템을 타입 안전하게 만들면 다크모드 같은 기능 구현이 훨씬 쉬워져:

// 테마 타입 정의
interface Theme {
  colors: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
    text: string;
    textSecondary: string;
    border: string;
    error: string;
    success: string;
  };
  spacing: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
  };
  typography: {
    h1: TextStyle;
    h2: TextStyle;
    body: TextStyle;
    caption: TextStyle;
  };
  borderRadius: {
    sm: number;
    md: number;
    lg: number;
    full: number;
  };
}

// 라이트 테마
const lightTheme: Theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
    background: '#FFFFFF',
    surface: '#F2F2F7',
    text: '#000000',
    textSecondary: '#8E8E93',
    border: '#C6C6C8',
    error: '#FF3B30',
    success: '#34C759',
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  typography: {
    h1: { fontSize: 32, fontWeight: 'bold' },
    h2: { fontSize: 24, fontWeight: '600' },
    body: { fontSize: 16, fontWeight: 'normal' },
    caption: { fontSize: 12, fontWeight: 'normal' },
  },
  borderRadius: {
    sm: 4,
    md: 8,
    lg: 16,
    full: 9999,
  },
};

// 다크 테마
const darkTheme: Theme = {
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    background: '#000000',
    surface: '#1C1C1E',
    text: '#FFFFFF',
    textSecondary: '#8E8E93',
  },
};

// 테마 Context
import React, { createContext, useContext, useState } from 'react';

interface ThemeContextType {
  theme: Theme;
  isDark: boolean;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isDark, setIsDark] = useState(false);
  const theme = isDark ? darkTheme : lightTheme;

  const toggleTheme = () => setIsDark(prev => !prev);

  return (
    <ThemeContext.Provider value={{ theme, isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 커스텀 훅
export const useTheme = (): ThemeContextType => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
};

// 컴포넌트에서 사용
const ThemedButton: React.FC<{ title: string; onPress: () => void }> = ({ title, onPress }) => {
  const { theme } = useTheme();

  return (
    <TouchableOpacity
      style={{
        backgroundColor: theme.colors.primary,
        padding: theme.spacing.md,
        borderRadius: theme.borderRadius.md,
      }}
      onPress={onPress}
    >
      <Text style={[theme.typography.body, { color: theme.colors.background }]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
};

이렇게 하면 테마 전환이 완전 타입 안전하게 돼! IDE에서 자동완성도 완벽하게 지원되고. 😎

🔥 실전 프로젝트 구조와 타입 관리

이론은 충분히 배웠으니, 이제 실제 프로젝트에서 어떻게 타입을 관리하는지 알아보자! 📁

📂 프로젝트 구조 예시

src/
├── types/
│   ├── index.ts              # 모든 타입 export
│   ├── api.types.ts          # API 관련 타입
│   ├── navigation.types.ts   # 네비게이션 타입
│   ├── user.types.ts         # 사용자 관련 타입
│   ├── post.types.ts         # 게시물 관련 타입
│   └── common.types.ts       # 공통 타입
├── components/
│   ├── common/
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Card.tsx
│   └── features/
│       ├── UserProfile.tsx
│       └── PostList.tsx
├── screens/
│   ├── HomeScreen.tsx
│   ├── ProfileScreen.tsx
│   └── SettingsScreen.tsx
├── services/
│   ├── api.service.ts        # API 호출 로직
│   └── storage.service.ts    # 로컬 저장소
├── hooks/
│   ├── useAuth.ts
│   ├── useTheme.ts
│   └── useApi.ts
├── contexts/
│   ├── AuthContext.tsx
│   └── ThemeContext.tsx
└── utils/
    ├── validators.ts
    └── formatters.ts

📝 타입 파일 작성 예시

types/api.types.ts

// API 공통 응답 타입
export interface ApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
  error?: ApiError;
}

export interface ApiError {
  code: string;
  message: string;
  details?: Record<string, any>;
}

// 페이지네이션
export interface PaginatedResponse<T> {
  items: T[];
  total: number;
  page: number;
  pageSize: number;
  hasMore: boolean;
}

// API 엔드포인트 타입
export type ApiEndpoints = {
  'GET /users/:id': {
    params: { id: string };
    response: UserData;
  };
  'POST /users': {
    body: CreateUserDto;
    response: UserData;
  };
  'GET /posts': {
    query: { page: number; limit: number };
    response: PaginatedResponse<Post>;
  };
};

types/user.types.ts

export interface UserData {
  id: string;
  username: string;
  email: string;
  profile: UserProfile;
  settings: UserSettings;
  createdAt: string;
  updatedAt: string;
}

export interface UserProfile {
  avatar: string;
  bio: string;
  location?: string;
  website?: string;
  followers: number;
  following: number;
}

export interface UserSettings {
  theme: 'light' | 'dark' | 'auto';
  notifications: NotificationSettings;
  privacy: PrivacySettings;
  language: string;
}

export interface NotificationSettings {
  push: boolean;
  email: boolean;
  sms: boolean;
  frequency: 'realtime' | 'daily' | 'weekly';
}

export interface PrivacySettings {
  profileVisibility: 'public' | 'friends' | 'private';
  showEmail: boolean;
  showLocation: boolean;
}

// DTO (Data Transfer Object)
export interface CreateUserDto {
  username: string;
  email: string;
  password: string;
}

export interface UpdateUserDto extends Partial<Omit<UserData, 'id' | 'createdAt' | 'updatedAt'>> {}

// 타입 가드
export const isUserData = (data: any): data is UserData => {
  return (
    typeof data === 'object' &&
    'id' in data &&
    'username' in data &&
    'email' in data
  );
};

🎣 커스텀 훅과 타입 안전성

커스텀 훅을 만들 때도 타입을 제대로 정의하면 재사용성이 훨씬 좋아져! 🪝

🔌 useApi 훅 만들기

import { useState, useEffect, useCallback } from 'react';

// 훅 반환 타입
interface UseApiResult<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
  refetch: () => Promise<void>;
}

// 훅 옵션 타입
interface UseApiOptions {
  immediate?: boolean; // 즉시 실행 여부
  onSuccess?: (data: any) => void;
  onError?: (error: string) => void;
}

// 제네릭 API 훅
function useApi<T>(
  apiFunction: () => Promise<T>,
  options: UseApiOptions = {}
): UseApiResult<T> {
  const { immediate = true, onSuccess, onError } = options;
  
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await apiFunction();
      setData(result);
      onSuccess?.(result);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
      setError(errorMessage);
      onError?.(errorMessage);
    } finally {
      setLoading(false);
    }
  }, [apiFunction, onSuccess, onError]);

  useEffect(() => {
    if (immediate) {
      fetchData();
    }
  }, [immediate, fetchData]);

  return { data, loading, error, refetch: fetchData };
}

// 사용 예시
const UserProfileScreen: React.FC = () => {
  const { data: user, loading, error, refetch } = useApi<UserData>(
    () => UserAPI.getUser('123'),
    {
      onSuccess: (data) => console.log('User loaded:', data),
      onError: (error) => console.error('Failed to load user:', error),
    }
  );

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error}</Text>;
  if (!user) return <Text>No user found</Text>;

  return (
    <View>
      <Text>{user.username}</Text>
      <CustomButton title="새로고침" onPress={refetch} />
    </View>
  );
};

📝 useForm 훅 만들기

interface UseFormOptions<T> {
  initialValues: T;
  validate?: (values: T) => Partial<Record<keyof T, string>>;
  onSubmit: (values: T) => void | Promise<void>;
}

interface UseFormResult<T> {
  values: T;
  errors: Partial<Record<keyof T, string>>;
  touched: Partial<Record<keyof T, boolean>>;
  handleChange: (field: keyof T) => (value: any) => void;
  handleBlur: (field: keyof T) => () => void;
  handleSubmit: () => Promise<void>;
  resetForm: () => void;
  setFieldValue: (field: keyof T, value: any) => void;
  isValid: boolean;
  isSubmitting: boolean;
}

function useForm<T extends Record<string, any>>(
  options: UseFormOptions<T>
): UseFormResult<T> {
  const { initialValues, validate, onSubmit } = options;

  const [values, setValues] = useState<T>(initialValues);
  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = useCallback((field: keyof T) => (value: any) => {
    setValues(prev => ({ ...prev, [field]: value }));
    // 값 변경 시 해당 필드 에러 제거
    if (errors[field]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        delete newErrors[field];
        return newErrors;
      });
    }
  }, [errors]);

  const handleBlur = useCallback((field: keyof T) => () => {
    setTouched(prev => ({ ...prev, [field]: true }));
    
    // 블러 시 유효성 검사
    if (validate) {
      const validationErrors = validate(values);
      if (validationErrors[field]) {
        setErrors(prev => ({ ...prev, [field]: validationErrors[field] }));
      }
    }
  }, [validate, values]);

  const handleSubmit = useCallback(async () => {
    // 모든 필드를 touched로 표시
    const allTouched = Object.keys(values).reduce(
      (acc, key) => ({ ...acc, [key]: true }),
      {} as Partial<Record<keyof T, boolean>>
    );
    setTouched(allTouched);

    // 유효성 검사
    if (validate) {
      const validationErrors = validate(values);
      setErrors(validationErrors);
      
      if (Object.keys(validationErrors).length > 0) {
        return;
      }
    }

    // 제출
    try {
      setIsSubmitting(true);
      await onSubmit(values);
    } catch (error) {
      console.error('Form submission error:', error);
    } finally {
      setIsSubmitting(false);
    }
  }, [values, validate, onSubmit]);

  const resetForm = useCallback(() => {
    setValues(initialValues);
    setErrors({});
    setTouched({});
  }, [initialValues]);

  const setFieldValue = useCallback((field: keyof T, value: any) => {
    setValues(prev => ({ ...prev, [field]: value }));
  }, []);

  const isValid = Object.keys(errors).length === 0;

  return {
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    resetForm,
    setFieldValue,
    isValid,
    isSubmitting,
  };
}

// 사용 예시
interface LoginFormValues {
  email: string;
  password: string;
}

const LoginScreen: React.FC = () => {
  const form = useForm<LoginFormValues>({
    initialValues: {
      email: '',
      password: '',
    },
    validate: (values) => {
      const errors: Partial<Record<keyof LoginFormValues, string>> = {};
      
      if (!values.email) {
        errors.email = '이메일을 입력해주세요';
      } else if (!/\S+@\S+\.\S+/.test(values.email)) {
        errors.email = '올바른 이메일 형식이 아닙니다';
      }
      
      if (!values.password) {
        errors.password = '비밀번호를 입력해주세요';
      } else if (values.password.length < 6) {
        errors.password = '비밀번호는 6자 이상이어야 합니다';
      }
      
      return errors;
    },
    onSubmit: async (values) => {
      console.log('Login:', values);
      // API 호출
    },
  });

  return (
    <View>
      <TextInput
        value={form.values.email}
        onChangeText={form.handleChange('email')}
        onBlur={form.handleBlur('email')}
        placeholder="이메일"
      />
      {form.touched.email && form.errors.email && (
        <Text style={{ color: 'red' }}>{form.errors.email}</Text>
      )}

      <TextInput
        value={form.values.password}
        onChangeText={form.handleChange('password')}
        onBlur={form.handleBlur('password')}
        placeholder="비밀번호"
        secureTextEntry
      />
      {form.touched.password && form.errors.password && (
        <Text style={{ color: 'red' }}>{form.errors.password}</Text>
      )}

      <CustomButton
        title={form.isSubmitting ? '로그인 중...' : '로그인'}
        onPress={form.handleSubmit}
        disabled={!form.isValid || form.isSubmitting}
      />
    </View>
  );
};

이 useForm 훅은 완전 타입 안전하면서도 재사용 가능해! 어떤 폼에든 적용할 수 있어. 🎉

🚨 흔한 타입 에러와 해결법

개발하다 보면 자주 마주치는 타입 에러들이 있어. 하나씩 해결법을 알려줄게! 🔧

❌ 에러 1: Type 'X' is not assignable to type 'Y'

// 문제 상황
interface User {
  id: number;
  name: string;
}

const user = {
  id: 1,
  name: 'John',
  age: 30, // 추가 속성
};

const validUser: User = user; // ❌ 에러!

// 해결법 1: 타입 단언
const validUser: User = user as User; // ✅

// 해결법 2: 필요한 속성만 추출
const validUser: User = {
  id: user.id,
  name: user.name,
}; // ✅

// 해결법 3: Pick 유틸리티 타입
const validUser: User = (({ id, name }) => ({ id, name }))(user); // ✅

❌ 에러 2: Object is possibly 'null' or 'undefined'

// 문제 상황
const user: User | null = getUser();
console.log(user.name); // ❌ 에러!

// 해결법 1: Optional Chaining
console.log(user?.name); // ✅

// 해결법 2: Nullish Coalescing
const userName = user?.name ?? 'Guest'; // ✅

// 해결법 3: 타입 가드
if (user !== null) {
  console.log(user.name); // ✅ 이 블록 안에서는 user가 null이 아님
}

// 해결법 4: Non-null Assertion (확실할 때만!)
console.log(user!.name); // ✅ 하지만 위험할 수 있음

❌ 에러 3: Property 'X' does not exist on type 'Y'

// 문제 상황
const data: any = fetchData();
console.log(data.user.name); // any 타입이라 에러는 안 나지만 위험!

// 해결법 1: 타입 정의
interface ApiData {
  user: {
    name: string;
    email: string;
  };
}

const data: ApiData = fetchData();
console.log(data.user.name); // ✅

// 해결법 2: 타입 가드로 안전하게 접근
const hasUserName = (data: any): data is { user: { name: string } } => {
  return data && data.user && typeof data.user.name === 'string';
};

if (hasUserName(data)) {
  console.log(data.user.name); // ✅
}

❌ 에러 4: Argument of type 'X' is not assignable to parameter of type 'Y'

// 문제 상황
const handlePress = (id: number) => {
  console.log(id);
};

const userId = '123'; // string
handlePress(userId); // ❌ 에러!

// 해결법 1: 타입 변환
handlePress(Number(userId)); // ✅

// 해결법 2: 함수 시그니처 수정
const handlePress = (id: number | string) => {
  const numericId = typeof id === 'string' ? Number(id) : id;
  console.log(numericId);
}; // ✅

// 해결법 3: 제네릭 사용
const handlePress = <T extends number | string>(id: T) => {
  console.log(id);
}; // ✅

🎓 실전 팁과 베스트 프랙티스

마지막으로 내가 실제 프로젝트에서 배운 꿀팁들을 공유할게! 이거 알았으면 진작 개발이 편했을 텐데... 😅

✨ 베스트 프랙티스 10가지

// 좋은 예
interface BaseEntity {
  id: string;
  createdAt: string;
  updatedAt: string;
}

interface User extends BaseEntity {
  username: string;
  email: string;
}

interface Post extends BaseEntity {
  title: string;
  content: string;
  authorId: string;
}

// 나쁜 예
interface Button {
  size: string; // 'small', 'medium', 'large' 외의 값도 가능
}

// 좋은 예
interface Button {
  size: 'small' | 'medium' | 'large'; // 정확히 이 세 가지만 가능
}

🔍 타입 디버깅 팁

타입 에러가 이해가 안 갈 때 이렇게 해봐:

// 타입 확인하기
type CheckType = typeof someVariable;

// 조건부 타입 디버깅
type Debug<T> = T extends infer R ? R : never;

// 타입 출력하기 (에러 메시지로 타입 확인)
type ShowType<T> = T extends never ? never : T;
const test: ShowType<ComplexType> = {} as any; // 에러 메시지에서 타입 확인 가능

📚 추천 리소스

더 공부하고 싶다면 이런 자료들을 추천해:

🎯 마무리하며

자, 여기까지 React Native에서 타입스크립트를 활용하는 방법을 쭉 살펴봤어! 처음엔 복잡해 보이지만, 하나씩 익히다 보면 정말 강력한 도구라는 걸 느낄 수 있을 거야. 🚀

타입스크립트는 단순히 타입을 체크하는 도구가 아니야. 코드의 의도를 명확히 하고, 버그를 사전에 방지하고, 팀원들과의 협업을 원활하게 만들어주는 강력한 파트너지. 특히 모바일 앱처럼 복잡한 프로젝트에서는 더더욱 그 가치가 빛을 발해! ✨

처음엔 타입 에러 때문에 답답할 수도 있어. "그냥 자바스크립트로 하면 되는데 왜 이렇게 복잡하게 하지?" 싶을 수도 있고. 근데 프로젝트가 커지고, 팀원이 늘어나고, 유지보수를 하게 되면... 그때 타입스크립트의 진가를 알게 될 거야. 😊

내가 실제로 재능넷에서 모바일 앱 개발 프로젝트를 진행할 때도, 타입스크립트 덕분에 클라이언트와의 신뢰도 높아지고 개발 속도도 빨라졌어. 코드 리뷰할 때도 타입만 보면 대충 뭐 하는 코드인지 바로 이해되니까 정말 편하더라고!

자, 이제 너도 타입스크립트로 멋진 React Native 앱을 만들어봐! 처음엔 천천히, 하나씩 적용해가면서 익숙해지면 돼. 화이팅! 💪🔥