React 컴포넌트에서 Custom Hook 사용하기

06 Nov 2023

reactjs

React에서는 Custom Hook을 사용하여 컴포넌트 간에 로직을 재사용할 수 있습니다. Custom Hook은 React 컴포넌트 안에서만 사용되는 로직을 추출하여 독립적인 함수로 만드는 것입니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

Custom Hook 작성하기

Custom Hook은 보통 use라는 접두사로 시작하는 함수 이름을 사용합니다. 예를 들어, 로그인 상태를 관리하는 Custom Hook을 만든다고 가정해봅시다.

import { useState } from 'react';

const useLogin = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => {
    // 로그인 로직 작성
    setIsLoggedIn(true);
  };

  const logout = () => {
    // 로그아웃 로직 작성
    setIsLoggedIn(false);
  };

  return {
    isLoggedIn,
    login,
    logout
  };
};

export default useLogin;

위의 예제에서는 useState를 사용하여 isLoggedIn 상태와 이를 업데이트하는 login과 logout 함수를 정의하였습니다. 이제 이 Custom Hook을 다른 컴포넌트에서 사용해보겠습니다.

Custom Hook 사용하기

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

const App = () => {
  const { isLoggedIn, login, logout } = useLogin();

  return (
    <div>
      <h1>Custom Hook 사용하기</h1>
      {isLoggedIn ? (
        <button onClick={logout}>로그아웃</button>
      ) : (
        <button onClick={login}>로그인</button>
      )}
    </div>
  );
};

export default App;

위의 예제에서는 useLogin Custom Hook을 useLogin 변수에 할당하고, 이를 통해 isLoggedIn, login, logout을 사용하여 로그인 상태를 확인하고 로그인 또는 로그아웃 버튼을 렌더링합니다.

결론

Custom Hook은 React 컴포넌트 간에 로직을 재사용하는 강력한 도구입니다. 이를 통해 코드를 간결하게 유지하고 가독성을 높일 수 있습니다. React에서 Custom Hook을 활용하여 컴포넌트를 개발하는 것을 고려해보세요!

참고 자료:

React 공식 문서

#React #CustomHook