타입스크립트로 커스텀 훅 개발하기 (React)

안녕하세요, 재능넷 독자 여러분! 오늘은 React 개발자들에게 매우 유용한 주제인 '타입스크립트로 커스텀 훅 개발하기'에 대해 깊이 있게 살펴보겠습니다. 이 글을 통해 여러분은 타입스크립트의 강력한 타입 시스템을 활용하여 안전하고 재사용 가능한 커스텀 훅을 만드는 방법을 배우게 될 것입니다. 🚀

재능넷에서는 다양한 프로그래밍 지식을 공유하고 있는데요, 그 중에서도 타입스크립트와 React는 현대 웹 개발에서 매우 중요한 위치를 차지하고 있습니다. 이 두 기술을 결합하면 더욱 강력하고 안정적인 애플리케이션을 만들 수 있죠. 그럼 지금부터 타입스크립트로 커스텀 훅을 개발하는 방법에 대해 상세히 알아보겠습니다. 💻

1. 타입스크립트와 React 훅의 기본

타입스크립트와 React 훅에 대한 기본적인 이해부터 시작해볼까요? 🤔

1.1 타입스크립트란?

타입스크립트는 자바스크립트의 슈퍼셋 언어로, 정적 타입을 지원합니다. 이는 코드의 안정성과 가독성을 크게 향상시키며, 특히 대규모 프로젝트에서 그 진가를 발휘합니다.

타입스크립트의 주요 특징은 다음과 같습니다:

정적 타입 검사: 컴파일 시점에 타입 오류를 잡아냅니다.
객체 지향 프로그래밍 지원: 클래스, 인터페이스 등을 사용할 수 있습니다.
최신 ECMAScript 기능 지원: 최신 자바스크립트 기능을 사용할 수 있습니다.
강력한 개발 도구 지원: IDE에서 뛰어난 자동 완성과 리팩토링 기능을 제공합니다.

1.2 React 훅이란?

React 훅은 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다. 16.8 버전에서 도입된 이후, React 개발의 패러다임을 크게 바꾸어 놓았죠.

주요 React 훅들은 다음과 같습니다:

useState: 컴포넌트에 로컬 상태를 추가합니다.
useEffect: 부수 효과를 수행합니다.
useContext: 컨텍스트를 구독합니다.
useReducer: 복잡한 상태 로직을 관리합니다.
useCallback: 메모이제이션된 콜백을 반환합니다.
useMemo: 메모이제이션된 값을 반환합니다.

1.3 타입스크립트와 React 훅의 만남

타입스크립트와 React 훅을 함께 사용하면, 타입 안정성과 코드의 자기 문서화 능력이 크게 향상됩니다. 예를 들어, useState를 타입스크립트와 함께 사용하면 다음과 같이 됩니다:

const [count, setCount] = useState<number>(0);

이렇게 하면 count가 숫자 타입임을 명시적으로 선언할 수 있고, setCount 함수에 숫자가 아닌 값을 전달하려고 하면 컴파일 시점에 오류를 발견할 수 있습니다.

이제 타입스크립트와 React 훅의 기본을 살펴봤으니, 다음 섹션에서는 실제로 커스텀 훅을 개발하는 방법에 대해 알아보겠습니다. 🛠️

2. 커스텀 훅의 개념과 필요성

커스텀 훅은 React의 강력한 기능 중 하나입니다. 이를 통해 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있죠. 그럼 커스텀 훅이 정확히 무엇이고, 왜 필요한지 자세히 알아보겠습니다. 🧐

2.1 커스텀 훅이란?

커스텀 훅은 React의 내장 훅을 사용하여 만든 사용자 정의 함수입니다. 이 함수는 컴포넌트 간에 상태 관련 로직을 재사용할 수 있게 해줍니다. 커스텀 훅의 이름은 반드시 'use'로 시작해야 하며, 이는 React가 해당 함수를 훅으로 인식하게 하는 규칙입니다.

예를 들어, 다음과 같은 커스텀 훅을 생각해볼 수 있습니다:

function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    function updateSize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  return size;
}

이 useWindowSize 훅은 창의 크기를 추적하고, 크기가 변경될 때마다 업데이트된 값을 반환합니다.

2.2 커스텀 훅의 필요성

커스텀 훅을 사용하면 다음과 같은 이점을 얻을 수 있습니다:

코드 재사용성 향상: 여러 컴포넌트에서 동일한 로직을 사용해야 할 때, 커스텀 훅으로 해당 로직을 추출하여 재사용할 수 있습니다.
관심사의 분리: 복잡한 컴포넌트 로직을 별도의 함수로 분리하여 컴포넌트를 더 깔끔하고 이해하기 쉽게 만들 수 있습니다.
테스트 용이성: 로직이 분리되어 있어 단위 테스트를 더 쉽게 작성할 수 있습니다.
상태 관리 간소화: 복잡한 상태 관리 로직을 커스텀 훅으로 추상화하여 컴포넌트의 복잡도를 줄일 수 있습니다.

2.3 커스텀 훅과 타입스크립트의 시너지

타입스크립트를 사용하여 커스텀 훅을 개발하면, 더욱 강력한 이점을 얻을 수 있습니다:

타입 안정성: 훅의 입력과 출력에 대한 타입을 명시적으로 정의할 수 있어, 사용 시 발생할 수 있는 타입 관련 오류를 미리 방지할 수 있습니다.
자동 완성 지원: IDE에서 훅의 반환 값에 대한 자동 완성을 제공받을 수 있어 개발 생산성이 향상됩니다.
문서화 효과: 타입 정의 자체가 훅의 사용 방법에 대한 문서 역할을 하므로, 별도의 문서 없이도 훅의 사용법을 쉽게 이해할 수 있습니다.

예를 들어, 앞서 본 useWindowSize 훅을 타입스크립트로 작성하면 다음과 같습니다:

interface Size {
  width: number;
  height: number;
}

function useWindowSize(): Size {
  const [size, setSize] = useState<Size>({ width: 0, height: 0 });

  useEffect(() => {
    function updateSize() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  return size;
}

이렇게 타입을 명시함으로써, 이 훅을 사용하는 개발자는 size 객체가 width와 height 속성을 가진다는 것을 명확히 알 수 있습니다.

이제 커스텀 훅의 개념과 필요성에 대해 알아보았습니다. 다음 섹션에서는 실제로 타입스크립트를 사용하여 커스텀 훅을 개발하는 방법에 대해 자세히 알아보겠습니다. 🚀

3. 타입스크립트로 기본적인 커스텀 훅 만들기

이제 본격적으로 타입스크립트를 사용하여 커스텀 훅을 만들어보겠습니다. 기본적인 예제부터 시작해서 점점 복잡한 훅을 만들어가는 과정을 통해 타입스크립트와 React 훅의 강력한 조합을 경험해보세요. 🛠️

3.1 카운터 훅 만들기

가장 기본적인 예제로, 카운터 기능을 하는 커스텀 훅을 만들어보겠습니다.

import { useState } from 'react';

function useCounter(initialValue: number = 0) {
  const [count, setCount] = useState<number>(initialValue);

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

이 useCounter 훅은 다음과 같은 특징을 가집니다:

초기값을 매개변수로 받습니다. 기본값은 0입니다.
현재 카운트 값과 이를 조작할 수 있는 함수들을 반환합니다.
타입스크립트를 사용하여 매개변수와 반환값의 타입을 명시적으로 정의했습니다.

이 훅을 사용하는 방법은 다음과 같습니다:

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

3.2 입력 폼 훅 만들기

이번에는 조금 더 복잡한 예제로, 입력 폼을 관리하는 커스텀 훅을 만들어보겠습니다.

import { useState, ChangeEvent } from 'react';

interface UseInputResult<T> {
  value: T;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  reset: () => void;
}

function useInput<T>(initialValue: T): UseInputResult<T> {
  const [value, setValue] = useState<T>(initialValue);

  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value as unknown as T);
  };

  const reset = () => setValue(initialValue);

  return { value, onChange, reset };
}

이 useInput 훅의 특징은 다음과 같습니다:

제네릭을 사용하여 다양한 타입의 입력값을 처리할 수 있습니다.
입력값, onChange 핸들러, 리셋 함수를 반환합니다.
타입스크립트의 인터페이스를 사용하여 반환값의 구조를 명확히 정의했습니다.

이 훅을 사용하는 방법은 다음과 같습니다:

function InputComponent() {
  const { value: name, onChange: onNameChange, reset: resetName } = useInput<string>('');
  const { value: age, onChange: onAgeChange, reset: resetAge } = useInput<number>(0);

  return (
    <div>
      <input type="text" value={name} onChange={onNameChange} placeholder="Name" />
      <input type="number" value={age} onChange={onAgeChange} placeholder="Age" />
      <button onClick={() => { resetName(); resetAge(); }}>Reset</button>
    </div>
  );
}

3.3 타입스크립트를 활용한 훅의 개선

타입스크립트를 사용하면 훅의 안정성과 사용성을 더욱 개선할 수 있습니다. 예를 들어, useInput 훅을 다음과 같이 개선할 수 있습니다:

import { useState, ChangeEvent } from 'react';

type InputType = string | number;

interface UseInputResult<T extends InputType> {
  value: T;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  reset: () => void;
  isValid: boolean;
}

function useInput<T extends InputType>(
  initialValue: T, 
  validator?: (value: T) => boolean
): UseInputResult<T> {
  const [value, setValue] = useState<T>(initialValue);
  const [isValid, setIsValid] = useState<boolean>(true);

  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value as unknown as T;
    setValue(newValue);
    if (validator) {
      setIsValid(validator(newValue));
    }
  };

  const reset = () => {
    setValue(initialValue);
    setIsValid(true);
  };

  return { value, onChange, reset, isValid };
}

이렇게 개선된 useInput 훅은 다음과 같은 특징을 가집니다:

입력 타입을 string 또는 number로 제한합니다.
선택적으로 유효성 검사 함수를 받아 입력값의 유효성을 검사할 수 있습니다.
입력값의 유효성 상태를 반환합니다.

이 개선된 훅을 사용하는 예제는 다음과 같습니다:

function AdvancedInputComponent() {
  const { 
    value: name, 
    onChange: onNameChange, 
    reset: resetName, 
    isValid: isNameValid 
  } = useInput<string>('', (value) => value.length >= 2);

  const { 
    value: age, 
    onChange: onAgeChange, 
    reset: resetAge, 
    isValid: isAgeValid 
  } = useInput<number>(0, (value) => value >= 0 && value < 120);

  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={onNameChange} 
        style={{borderColor: isNameValid ? 'green' : 'red'}} 
        placeholder="Name (at least 2 characters)" 
      />
      <input 
        type="number" 
        value={age} 
        onChange={onAgeChange} 
        style={{borderColor: isAgeValid ? 'green' : 'red'}} 
        placeholder="Age (0-120)" 
      />
      <button onClick={() => { resetName(); resetAge(); }}>Reset</button>
    </div>
  );
}

이렇게 타입스크립트를 활용하면 더욱 안전하고 사용하기 쉬운 커스텀 훅을 만들 수 있습니다. 다음 섹션에서는 더 복잡한 시나리오에서 타입스크립트와 React 훅을 활용하는 방법에 대해 알아보겠습니다. 💡

4. 고급 커스텀 훅 개발하기

이제 더 복잡하고 실용적인 커스텀 훅을 개발해보겠습니다. 이 섹션에서는 비동기 작업 처리, 네트워크 요청, 그리고 복잡한 상태 관리를 위한 커스텀 훅을 만들어볼 것입니다. 이를 통해 타입스크립트와 React 훅의 강력한 기능을 더욱 깊이 이해할 수 있을 것입니다. 🚀

4.1 비동기 작업을 위한 useAsync 훅

비동기 작업을 쉽게 처리할 수 있는 useAsync 훅을 만들어보겠습니다. 이 훅은 로딩 상태, 에러 상태, 그리고 결과 데이터를 관리합니다.

import { useState, useCallback } from 'react';

interface AsyncState<T> {
  loading: boolean;
  error: Error | null;
  data: T | null;
}

type AsyncFn<T> = (...args: any[]) => Promise<T>;

function useAsync<T>(asyncFunction: AsyncFn<T>, immediate = true) {
  const [state, setState] = useState<AsyncState<T>>({
    loading: immediate,
    error: null,
    data: null,
  });

  const execute = useCallback((...args: any[]) => {
    setState({ loading: true, error: null, data: null });
    return asyncFunction(...args)
      .then((data) => {
        setState({ loading: false, error: null, data });
        return data;
      })
      .catch((error) => {
        setState({ loading: false, error, data: null });
        throw error;
      });
  }, [asyncFunction]);

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

  return { ...state, execute };
}

이 useAsync 훅의 특징은 다음과 같습니다:

제네릭을 사용하여 다양한 타입의 비동기 함수를 처리할 수 있습니다.
로딩 상태, 에러 상태, 결과 데이터를 관리합니다.
비동기 함수를 즉시 실행할지 여부를 선택할 수 있습니다.
execute 함수를 통해 비동기 작업을 수동으로 트리거할 수 있습니다.

이 훅을 사용하는 예제는 다음과 같습니다:

function AsyncComponent() {
  const fetchUser = async (id: number) => {
    const response = await fetch(`https://api.example.com/users/${id}`);
    if (!response.ok) throw new Error('Failed to fetch user');
    return response.json();
  };

  const { loading, error, data, execute } = useAsync(fetchUser);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <p>User: {data.name}</p>}
      <button onClick={() => execute(1)}>Fetch User 1</button>
    </div>
  );
}

4.2 네트워크 요청을 위한 useFetch 훅

이번에는 네트워크 요청을 쉽게 할 수 있는 useFetch 훅을 만들어보겠습니다. 이 훅은 useAsync를 기반으로 하되, URL을 입력으로 받아 자동으로 fetch 요청을 수행합니다.

import { useState, useEffect } from 'react';

interface FetchState<T> {
  loading: boolean;
  error: Error | null;
  data: T | null;
}

function useFetch<T>(url:  string, options?: RequestInit) {
  const [state, setState] = useState<fetchstate>>({
    loading: true,
    error: null,
    data: null,
  });

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setState({ loading: false, error: null, data });
      } catch (error) {
        setState({ loading: false, error: error as Error, data: null });
      }
    };

    fetchData();
  }, [url, options]);

  return state;
}
</fetchstate>

이 useFetch 훅의 특징은 다음과 같습니다:

URL과 옵션을 입력으로 받아 자동으로 fetch 요청을 수행합니다.
로딩 상태, 에러 상태, 결과 데이터를 관리합니다.
제네릭을 사용하여 다양한 타입의 응답 데이터를 처리할 수 있습니다.

이 훅을 사용하는 예제는 다음과 같습니다:

interface User {
  id: number;
  name: string;
  email: string;
}

function UserComponent() {
  const { loading, error, data } = useFetch<user>('https://api.example.com/user/1');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>No data</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
    </div>
  );
}
</user>

4.3 복잡한 상태 관리를 위한 useReducer 훅

마지막으로, 복잡한 상태 관리를 위한 useReducer를 활용한 커스텀 훅을 만들어보겠습니다. 이 예제에서는 쇼핑 카트를 관리하는 훅을 만들어볼 것입니다.

import { useReducer } from 'react';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  total: number;
}

type CartAction =
  | { type: 'ADD_ITEM'; payload: CartItem }
  | { type: 'REMOVE_ITEM'; payload: number }
  | { type: 'UPDATE_QUANTITY'; payload: { id: number; quantity: number } }
  | { type: 'CLEAR_CART' };

function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM':
      const existingItem = state.items.find(item => item.id === action.payload.id);
      if (existingItem) {
        return {
          ...state,
          items: state.items.map(item =>
            item.id === action.payload.id
              ? { ...item, quantity: item.quantity + 1 }
              : item
          ),
          total: state.total + action.payload.price,
        };
      }
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price,
      };
    case 'REMOVE_ITEM':
      const itemToRemove = state.items.find(item => item.id === action.payload);
      if (!itemToRemove) return state;
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload),
        total: state.total - itemToRemove.price * itemToRemove.quantity,
      };
    case 'UPDATE_QUANTITY':
      return {
        ...state,
        items: state.items.map(item =>
          item.id === action.payload.id
            ? { ...item, quantity: action.payload.quantity }
            : item
        ),
        total: state.items.reduce((total, item) =>
          item.id === action.payload.id
            ? total + item.price * action.payload.quantity
            : total + item.price * item.quantity
        , 0),
      };
    case 'CLEAR_CART':
      return { items: [], total: 0 };
    default:
      return state;
  }
}

function useShoppingCart() {
  const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });

  const addItem = (item: CartItem) => dispatch({ type: 'ADD_ITEM', payload: item });
  const removeItem = (id: number) => dispatch({ type: 'REMOVE_ITEM', payload: id });
  const updateQuantity = (id: number, quantity: number) =>
    dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } });
  const clearCart = () => dispatch({ type: 'CLEAR_CART' });

  return { state, addItem, removeItem, updateQuantity, clearCart };
}

이 useShoppingCart 훅의 특징은 다음과 같습니다:

복잡한 상태 로직을 useReducer를 사용하여 관리합니다.
타입스크립트를 사용하여 액션과 상태의 타입을 명확히 정의합니다.
카트에 아이템 추가, 제거, 수량 변경, 카트 비우기 등의 기능을 제공합니다.

이 훅을 사용하는 예제는 다음과 같습니다:

function ShoppingCartComponent() {
  const { state, addItem, removeItem, updateQuantity, clearCart } = useShoppingCart();

  return (
    <div>
      <h2>Shopping Cart</h2>
      {state.items.map(item => (
        <div key="{item.id}">
          <span>{item.name} - ${item.price} x {item.quantity}</span>
          <button onclick="{()"> removeItem(item.id)}>Remove</button>
          <button onclick="{()"> updateQuantity(item.id, item.quantity + 1)}>+</button>
          <button onclick="{()"> updateQuantity(item.id, Math.max(1, item.quantity - 1))}>-</button>
        </div>
      ))}
      <p>Total: ${state.total}</p>
      <button onclick="{()"> addItem({ id: Date.now(), name: 'New Item', price: 10, quantity: 1 })}>
        Add New Item
      </button>
      <button onclick="{clearCart}">Clear Cart</button>
    </div>
  );
}

이러한 고급 커스텀 훅들을 사용하면 복잡한 로직을 효과적으로 캡슐화하고, 컴포넌트의 가독성과 재사용성을 크게 향상시킬 수 있습니다. 타입스크립트를 활용함으로써 타입 안정성을 확보하고, 개발 시 자동 완성 기능을 통해 생산성을 높일 수 있습니다. 🚀

다음 섹션에서는 이러한 커스텀 훅들을 실제 프로젝트에 적용하는 방법과 best practices에 대해 알아보겠습니다. 💡

5. 커스텀 훅의 Best Practices와 실제 적용

지금까지 다양한 커스텀 훅을 만들어보았습니다. 이제 이러한 훅들을 실제 프로젝트에 적용할 때 고려해야 할 best practices와 팁들을 알아보겠습니다. 또한, 커스텀 훅을 사용할 때의 주의사항과 최적화 방법에 대해서도 살펴보겠습니다. 🎯

5.1 커스텀 훅 설계 시 고려사항

단일 책임 원칙 준수: 각 훅은 하나의 명확한 목적을 가져야 합니다. 너무 많은 기능을 하나의 훅에 넣지 않도록 주의하세요.
재사용성 고려: 훅을 설계할 때는 여러 상황에서 재사용할 수 있도록 충분히 일반적으로 만들어야 합니다.
명확한 네이밍: 훅의 이름은 그 기능을 명확히 나타내야 합니다. 예를 들어, useFetch, useForm 등과 같이 직관적인 이름을 사용하세요.
타입 안정성 확보: 타입스크립트를 최대한 활용하여 타입 안정성을 확보하세요. 제네릭을 적절히 사용하면 더욱 유연한 훅을 만들 수 있습니다.
에러 처리: 발생할 수 있는 에러 상황을 고려하고, 적절한 에러 처리 로직을 포함시키세요.

5.2 커스텀 훅 최적화

메모이제이션 활용: useMemo와 useCallback을 적절히 사용하여 불필요한 재계산이나 재렌더링을 방지하세요.
의존성 배열 최소화: useEffect나 useCallback 등에서 의존성 배열을 최소화하여 불필요한 효과나 콜백 재생성을 방지하세요.
상태 업데이트 최적화: 상태 업데이트 시 불변성을 지키면서도 효율적으로 업데이트할 수 있는 방법을 고려하세요.

예를 들어, useFetch 훅을 최적화하면 다음과 같습니다:

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

function useFetch<T>(url: string, options?: RequestInit) {
  const [state, setState] = useState<FetchState<T>>({
    loading: true,
    error: null,
    data: null,
  });

  const fetchData = useCallback(async () => {
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      setState({ loading: false, error: null, data });
    } catch (error) {
      setState({ loading: false, error: error as Error, data: null });
    }
  }, [url, options]);

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

  const refetch = useCallback(() => {
    setState(prev => ({ ...prev, loading: true }));
    fetchData();
  }, [fetchData]);

  const memoizedState = useMemo(() => state, [state]);

  return { ...memoizedState, refetch };
}

5.3 커스텀 훅 테스트

커스텀 훅을 테스트하는 것은 매우 중요합니다. 다음은 커스텀 훅을 테스트하는 방법에 대한 몇 가지 팁입니다:

@testing-library/react-hooks 사용: 이 라이브러리를 사용하면 훅을 쉽게 테스트할 수 있습니다.
다양한 시나리오 테스트: 성공 케이스뿐만 아니라 에러 케이스, 경계 조건 등 다양한 시나리오를 테스트하세요.
비동기 동작 테스트: 비동기 동작을 포함하는 훅의 경우, 비동기 테스트 방법을 숙지하고 적용하세요.

예를 들어, useFetch 훅의 테스트 코드는 다음과 같을 수 있습니다:

import { renderHook, act } from '@testing-library/react-hooks';
import { useFetch } from './useFetch';

describe('useFetch', () => {
  it('should fetch data successfully', async () => {
    const mockData = { id: 1, name: 'Test' };
    global.fetch = jest.fn().mockResolvedValue({
      ok: true,
      json: async () => mockData,
    });

    const { result, waitForNextUpdate } = renderHook(() => useFetch('https://api.example.com/data'));

    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBe(null);

    await waitForNextUpdate();

    expect(result.current.loading).toBe(false);
    expect(result.current.data).toEqual(mockData);
    expect(result.current.error).toBe(null);
  });

  it('should handle fetch error', async () => {
    const errorMessage = 'Network Error';
    global.fetch = jest.fn().mockRejectedValue(new Error(errorMessage));

    const { result, waitForNextUpdate } = renderHook(() => useFetch('https://api.example.com/data'));

    expect(result.current.loading).toBe(true);

    await waitForNextUpdate();

    expect(result.current.loading).toBe(false);
    expect(result.current.data).toBe(null);
    expect(result.current.error).toBeInstanceOf(Error);
    expect(result.current.error?.message).toBe(errorMessage);
  });
});

5.4 실제 프로젝트 적용 예시

마지막으로, 이러한 커스텀 훅들을 실제 프로젝트에 어떻게 적용할 수 있는지 간단한 예시를 통해 살펴보겠습니다. 다음은 사용자 정보를 불러오고 관리하는 간단한 애플리케이션입니다:

import React from 'react';
import { useFetch } from './hooks/useFetch';
import { useForm } from './hooks/useForm';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile() {
  const { data: user, loading, error, refetch } = useFetch<User>('https://api.example.com/user');
  const { values, handleChange, handleSubmit } = useForm<User>({
    onSubmit: async (formData) => {
      await fetch('https://api.example.com/user', {
        method: 'PUT',
        body: JSON.stringify(formData),
        headers: { 'Content-Type': 'application/json' },
      });
      refetch();
    },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!user) return <p>No user data</p>;

  return (
    <div>
      <h1>User Profile</h1>
      <form onSubmit={handleSubmit}>
        <input
          name="name"
          value={values.name || user.name}
          onChange={handleChange}
          placeholder="Name"
        />
        <input
          name="email"
          value={values.email || user.email}
          onChange={handleChange}
          placeholder="Email"
        />
        <button type="submit">Update Profile</button>
      </form>
    </div>
  );
}

이 예시에서는 useFetch와 useForm 훅을 사용하여 사용자 정보를 불러오고 수정하는 기능을 구현했습니다. 이처럼 커스텀 훅을 사용하면 복잡한 로직을 간단하게 추상화하고, 컴포넌트의 가독성을 높일 수 있습니다.

이렇게 커스텀 훅을 활용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다. 또한, 타입스크립트를 함께 사용함으로써 타입 안정성을 확보하고 개발 생산성을 높일 수 있습니다. 커스텀 훅은 React 애플리케이션 개발에 있어 강력한 도구이므로, 적극적으로 활용해 보시기 바랍니다! 🚀

6. 결론 및 향후 전망

지금까지 타입스크립트를 사용하여 React 커스텀 훅을 개발하는 방법에 대해 깊이 있게 살펴보았습니다. 이제 우리가 배운 내용을 정리하고, 앞으로의 전망에 대해 이야기해 보겠습니다. 🌟

6.1 핵심 요약

타입스크립트의 중요성: 타입스크립트를 사용함으로써 타입 안정성을 확보하고, 개발 생산성을 높일 수 있습니다.
커스텀 훅의 장점: 커스텀 훅을 통해 로직을 재사용하고, 컴포넌트의 복잡성을 줄일 수 있습니다.
다양한 훅 패턴: 상태 관리, 비동기 작업 처리, 폼 관리 등 다양한 상황에 맞는 커스텀 훅을 개발할 수 있습니다.
최적화와 테스트: 메모이제이션을 활용한 최적화와 체계적인 테스트를 통해 훅의 품질을 높일 수 있습니다.
실제 적용: 커스텀 훅을 실제 프로젝트에 적용함으로써 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.

6.2 향후 전망

React와 타입스크립트의 조합은 앞으로도 계속해서 발전할 것으로 보입니다. 특히 다음과 같은 방향으로의 발전이 예상됩니다:

서버 컴포넌트와의 통합: React 서버 컴포넌트가 보편화되면서, 서버와 클라이언트 간의 상태 관리를 위한 새로운 형태의 훅이 등장할 수 있습니다.
AI 활용: 인공지능을 활용한 코드 생성 도구들이 발전하면서, 커스텀 훅의 자동 생성이나 최적화가 가능해질 수 있습니다.
성능 최적화: React의 성능 최적화 기능이 발전함에 따라, 이를 더욱 효과적으로 활용할 수 있는 커스텀 훅 패턴이 등장할 것입니다.
타입 시스템의 발전: 타입스크립트의 타입 시스템이 더욱 강력해지면서, 더 정교한 타입 추론과 검증이 가능한 훅을 만들 수 있게 될 것입니다.
크로스 플랫폼 지원: React Native 등 다양한 플랫폼에서 사용할 수 있는 범용적인 커스텀 훅 라이브러리가 더욱 발전할 것입니다.

6.3 마무리 메시지

타입스크립트와 React 훅은 현대 웹 개발에 있어 매우 강력한 도구입니다. 이 두 기술을 결합하여 커스텀 훅을 개발하는 것은 코드의 품질과 개발 생산성을 크게 향상시킬 수 있는 방법입니다. 🚀

앞으로도 계속해서 새로운 패턴과 기술이 등장할 것입니다. 그러므로 개발자로서 우리는 항상 학습하고 실험하며, 더 나은 코드를 작성하기 위해 노력해야 합니다. 이 글이 여러분의 React와 타입스크립트 여정에 도움이 되었기를 바랍니다. 💡

끊임없이 발전하는 기술의 세계에서, 우리는 항상 새로운 도전과 기회를 마주하게 될 것입니다. 그 여정에서 이 글이 작은 나침반이 되어 여러분의 개발 여정에 도움이 되기를 바랍니다. 함께 성장하고 발전하는 개발 커뮤니티의 일원으로서, 여러분의 끊임없는 도전과 성장을 응원합니다! 🌱

Happy coding! 🎉