Custom Hook을 활용한 로그인 기능 구현

06 Nov 2023

customhook

로그인 기능은 대부분의 웹 애플리케이션에서 필수적인 기능입니다. 이번에는 React에서 Custom Hook을 활용하여 간단한 로그인 기능을 구현해보도록 하겠습니다.

1. Custom Hook 생성하기

먼저, Custom Hook을 생성하여 로그인 기능을 구현할 것입니다. 아래는 예시 코드입니다.

import { useState } from 'react';

export const useLogin = () => {
    const [isLoggedIn, setLoggedIn] = useState(false);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const login = () => {
        // 여기서 실제로 로그인 로직을 구현합니다.
        // 예시로는 간단히 username이 'admin'이고 password가 'password'인 경우에만 로그인 성공으로 가정합니다.
        if (username === 'admin' && password === 'password') {
            setLoggedIn(true);
        } else {
            setLoggedIn(false);
        }
    };

    const logout = () => {
        // 로그아웃 로직을 구현합니다.
        setLoggedIn(false);
        setUsername('');
        setPassword('');
    };

    // 반환되는 값들을 추가로 활용할 수 있도록 객체 형태로 반환합니다.
    return {
        isLoggedIn,
        username,
        password,
        setUsername,
        setPassword,
        login,
        logout
    };
};

위의 코드에서 useLogin이라는 Custom Hook을 생성합니다. 이 Hook은 isLoggedIn이라는 상태 값과 username, password 값을 관리하며, login과 logout 함수를 제공합니다.

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

이제 위에서 생성한 Custom Hook을 실제로 사용하여 로그인 기능을 구현하는 컴포넌트에서 사용해보겠습니다. 아래는 예시 코드입니다.

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

const Login = () => {
    const {
        isLoggedIn,
        username,
        password,
        setUsername,
        setPassword,
        login,
        logout
    } = useLogin();

    const handleUsernameChange = (e) => {
        setUsername(e.target.value);
    };

    const handlePasswordChange = (e) => {
        setPassword(e.target.value);
    };

    return (
        <div>
            {isLoggedIn ? (
                <>
                    <p>로그인 되었습니다. 환영합니다, {username}님!</p>
                    <button onClick={logout}>로그아웃</button>
                </>
            ) : (
                <>
                    <input type="text" value={username} onChange={handleUsernameChange} placeholder="사용자명" />
                    <input type="password" value={password} onChange={handlePasswordChange} placeholder="비밀번호" />
                    <button onClick={login}>로그인</button>
                </>
            )}
        </div>
    );
};

위의 코드에서 useLogin Hook을 사용하여 상태 값과 로그인, 로그아웃 함수를 받아옵니다. 로그인이 되어있는지 여부에 따라 화면을 다르게 렌더링하고, 입력한 사용자명과 비밀번호를 handleUsernameChange와 handlePasswordChange 함수를 통해 관리합니다.

이제 Login 컴포넌트를 원하는 곳에서 사용하여 로그인 기능을 간단하게 구현할 수 있습니다.

마무리

이번에는 React에서 Custom Hook을 활용하여 로그인 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 사용하면 여러 컴포넌트에서 로그인 기능을 함께 사용할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있습니다.

참고한 자료: