[React] React에서 Custom Hooks란?

 

 

1. Custom Hooks이란?

React에서 useEffect, useRef 등의 hook이 있듯이 React 개발자 스스로 Custom Hook을 만들어서 사용할 수 있다. Custom Hook은 기능을 재사용하기 위해 사용되는 함수입니다. Custom Hook은 보통 useState, useEffect 및 다른 React hook을 사용하여 상태 또는 행위를 추상화하고, 이를 컴포넌트 간에 공유할 수 있도록 도와준다.

Custom Hook은 "use"라는 접두어로 시작해야 한다. 이는 hook으로 인식될 수 있게, 더 나은 코드 가독성을 제공하는데 도움이 된다. 

 

2. Custom Hooks를 사용하는 이유

개발을 하다보면 비슷하게 생긴 코드를 파일마다 똑같이 작성하는 경우들이 생긴다. 그렇게 중복들이 생길 때 공통으로 사용할 수 있는 것으로 묶어주면 좋은데, 그런 비슷한 로직들을 중복해서 작성하지 않도록 custom hooks을 만들어서 사용할 수 있다. 

그렇게 비슷한 로직들을 추상화해서 재사용성 좋게 코드를 작성하면 컴포넌트 또한 간결함을 유지할 수 있고, 가독성 또한 향상시킬 수 있다. 또한 독립적으로 테스트하기도 쉬워진다. 

 

3. 사용하는 방법

다음은 로그인한 상태를 추상화한 Custom Hook 로직이다. 보통 로그인을 하면 로그인 했다는 증표로 Backend에서 Token을 받게 되는데 그 Token 여부로 간단하게 로그인 여부를 체크하는 예시 로직이다. 실제 Prod 서비스에서는 더욱 보안을 신경쓴 코드를 작성해야하지만 간단한 예시로 작성해보았다.

useLogin.jsx

import { useState, useEffect } from 'react';

// Custom Hook: 로그인 상태를 관리하는 Hook
function useLogin() {
  // 상태: 로그인 상태와 사용자 정보
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);

  // 토큰을 이용하여 로그인 상태 확인
  const checkLoginStatus = (token) => {
    // 실제로는 서버에서 토큰을 검증하고, 사용자 정보를 가져와야 함
    // 여기서는 단순화된 예제이므로 토큰만 확인
    const isLoggedIn = token ? true : false;
    setIsLoggedIn(isLoggedIn);
  };

  // 로그인 상태 확인 (초기 로딩 시)
  useEffect(() => {
    const token = localStorage.getItem('authToken');
    checkLoginStatus(token);
  }, []);

  // 로그인 처리
  const login = (token, userData) => {
    localStorage.setItem('authToken', token);
    setIsLoggedIn(true);
    setUser(userData);
  };

  // 로그아웃 처리
  const logout = () => {
    localStorage.removeItem('authToken');
    setIsLoggedIn(false);
    setUser(null);
  };

  // Custom Hook이 반환하는 값
  return {
    isLoggedIn,
    user,
    login,
    logout,
  };
}

export default useLogin;

 

이제 만들어준 hook을 컴포넌트에서 사용하면 되는데, 컴포넌트에서 hook을 import해서 사용한다. 

LoginComponent.jsx

import React from 'react';
import useLogin from './useLogin';

function LoginComponent() {
  // useLogin Custom Hook 사용
  const { isLoggedIn, user, login, logout } = useLogin();

  const handleLogin = () => {
    // 실제로는 여기에서 로그인 API 호출 등이 이루어져야 함
    // 여기서는 간단한 예제로 더미 데이터 사용
    const fakeToken = 'fakeToken123';
    const fakeUserData = { username: 'john_doe' };
    login(fakeToken, fakeUserData);
  };

  const handleLogout = () => {
    // 로그아웃 처리
    logout();
  };

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <p>Welcome, {user.username}!</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Please log in</p>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
}

export default LoginComponent;

 

useLogin으로 로그인 처리 및 로그인 여부 확인 로직을 따로 빼지 않았다면, 로그인 여부를 체크하는 모든 컴포넌트들에서 장황하게 확인하는 로직을 똑같이 여러번 작성했어야 할 것이다. 이렇게 자주 사용하는 로직을 custom hook으로 따로 빼서 관리하면 좋다.