리액트에서는 왜 커스텀 훅을 쓰나요?

date

Jan 18, 2025

slug

why-use-custom-hooks-in-react

author

status

Public

tags

React

summary

type

Post

thumbnail

category

updatedAt

Jan 30, 2025 01:33 PM

들어가며…

1. 관심사 분리 (Separation of Concerns)

"프로그램은 서로 분리된 관심사들의 집합이어야 한다." - Edsger W. Dijkstra "On the role of scientific thought" (1974)

[ 관심사 분리의 핵심 가치 ]

[ 리액트에서의 관심사 분리 ]

1. 비즈니스 로직: 데이터 변환, 계산, 유효성 검증

2. 상태 관리: 데이터의 CRUD 작업, 상태 업데이트

3. 데이터 처리: API 호출, 데이터 페칭, 에러 핸들링

4. 사이드 이펙트: 타이머, 이벤트 리스너, 구독 등

// useAuth.ts
interface AuthState {
  user: User | null;
  isLoading: boolean;
  error: Error | null;
}

const useAuth = () => {
  const [authState, setAuthState] = useState<AuthState>({
    user: null,
    isLoading: false,
    error: null
  });
  
  const login = async (credentials: Credentials) => {
    setAuthState(prev => ({ ...prev, isLoading: true }));
    try {
      const response = await authAPI.login(credentials);
      setAuthState({
        user: response.user,
        isLoading: false,
        error: null
      });
      // 토큰 관리
      localStorage.setItem('token', response.token);
    } catch (error) {
      setAuthState({
        user: null,
        isLoading: false,
        error: error as Error
      });
    }
  };

  // 자동 로그인 처리
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      // 토큰 유효성 검증 및 사용자 정보 갱신
    }
  }, []);

  return { ...authState, login };
};

• 이 훅은 인증이라는 하나의 책임만을 담당합니다

• 컴포넌트에서 복잡한 인증 로직을 완전히 분리하게 해줍니다

• 인증 상태 관리와 관련된 모든 로직이 한 곳에 모여있어 유지보수성이 향상됩니다

// 사용부
const LoginPage = () => {
  const { user, isLoading, error, login } = useAuth();
  
  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error.message} />;
  if (user) return <Navigate to="/dashboard" />;
  
  return <LoginForm onSubmit={login} />;
};

2. 상태 관리 로직 캡슐화

const useForm = <T extends object>(initialValues: T) => {
  const [values, setValues] = useState<T>(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValues(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  return { values, errors, handleChange };
};

// 구현 세부사항을 몰라도 됨
const SignupForm = () => {
  const { values, handleChange } = useForm({ email: '', password: '' });
  return <form>...</form>;
};

• 폼 상태 관리의 복잡한 내부 구현을 숨겼습니다

• 컴포넌트는 단순히 values와 handleChange만 사용합니다

• 유효성 검사, 에러 처리 등의 복잡한 로직이 훅 내부에 캡슐화되어 있습니다

3. 선언적 프로그래밍 지원

• 개발자는 "무엇"을 원하는지만 선언

• 리액트가 "어떻게" 처리할지 담당

const useAsync = <T>(asyncFn: () => Promise<T>) => {
  const [state, setState] = useState<{
    data: T | null;
    loading: boolean;
    error: Error | null;
  }>({
    data: null,
    loading: false,
    error: null
  });

  const execute = async () => {
    setState(prev => ({ ...prev, loading: true }));
    try {
      const data = await asyncFn();
      setState({ data, loading: false, error: null });
    } catch (error) {
      setState({ data: null, loading: false, error: error as Error });
    }
  };

  return { ...state, execute };
};

• "어떻게" 비동기 작업을 처리할지가 아닌, "무엇을" 할지만 선언합니다

• 로딩, 에러, 성공 상태를 자동으로 관리합니다

• 컴포넌트는 상태를 선언적으로 사용 하면 됩니다

4. Side-Effect 관리

[ 대표적인 Side-Effect ]

[ Side-Effect를 적절히 관리하지 않으면 발생할 수 있는 문제 ]

const useWebSocket = (url: string) => {
  const [messages, setMessages] = useState<Message[]>([]);
  
  useEffect(() => {
    const ws = new WebSocket(url);
    ws.onmessage = (event) => {
      setMessages(prev => [...prev, JSON.parse(event.data)]);
    };
    
    return () => ws.close();
  }, [url]);

  return messages;
};

• WebSocket 연결이라는 사이드 이펙트를 컴포넌트에서 완전히 분리합니다

• 연결 생성과 정리(cleanup)를 훅 내부에서 처리합니다

• 컴포넌트는 메시지 데이터만 받아서 사용합니다

⁉️ 기습 질문

커스텀 훅으로 분리해야 하는 경우

// ✅ 분리 필요: 여러 컴포넌트에서 재사용될 수 있는 범용적인 로직
const useIntersectionObserver = (ref: RefObject<HTMLElement>, options = {}) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, options);

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => observer.disconnect();
  }, [ref, options]);

  return isVisible;
};

// 여러 컴포넌트에서 재사용
const ImageComponent = () => {
  const imgRef = useRef(null);
  const isVisible = useIntersectionObserver(imgRef);

  return (
    <img 
      ref={imgRef}
      src={isVisible ? "actual-image.jpg" : "placeholder.jpg"}
    />
  );
};

• 동일한 로직이 여러 컴포넌트에서 재사용될 때

• 로직이 충분히 복잡하여 독립적인 단위로 관리될 필요가 있을 때

• 특정 기능이 명확하게 구분되어 있을 때

컴포넌트 내부에 두어야 하는 경우

// ✅ 컴포넌트 내부 유지: 컴포넌트 특화된 로직, 여러 상태가 긴밀히 연관됨
const TodoItem = ({ id, initialText }: TodoItemProps) => {
  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState(initialText);
  const [isSaving, setIsSaving] = useState(false);

  // 이 이펙트는 컴포넌트의 여러 상태와 긴밀히 연관되어 있음
  useEffect(() => {
    if (!isEditing && text !== initialText) {
      setIsSaving(true);
      api.updateTodo(id, text)
        .finally(() => setIsSaving(false));
    }
  }, [isEditing, text, initialText, id]);

  return (
    <div>
      {isEditing ? (
        <input
          value={text}
          onChange={e => setText(e.target.value)}
          onBlur={() => setIsEditing(false)}
        />
      ) : (
        <span onClick={() => setIsEditing(true)}>
          {text} {isSaving && "(저장 중...)"}
        </span>
      )}
    </div>
  );
};

• 해당 컴포넌트에만 특화된 로직일 때

• 여러 상태가 긴밀하게 연관되어 있을 때

• 로직이 단순하여 분리의 이점이 크지 않을 때

5. 코드 가독성

const useSearchDebounce = (delay: number = 300) => {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedQuery(query);
    }, delay);

    return () => clearTimeout(timer);
  }, [query, delay]);

  return { query, setQuery, debouncedQuery };
};

• 디바운스라 의미 있는 이름으로 훅을 분리합니다

• 타이머 관리 로직이 컴포넌트를 복잡하게 만들지 않습니다

• 의도가 명확히 드러나는 인터페이스를 제공합니다

6. 유지보수성

const useLocalStorage = <T>(key: string, initialValue: T) => {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
};

맺음말

🎯 아키텍처적 가치

💻 개발자 경험 향상

🛠 유지보수성 개선