[javascript] Redux에서 인증(Authentication) 관리 방법은?

22 Nov 2023

javascript

Redux는 상태 관리 라이브러리로써, 애플리케이션의 상태를 효율적으로 관리하기 위해 사용됩니다. 인증(Authentication)은 많은 웹 애플리케이션에서 필수적인 기능 중 하나로, 사용자의 로그인 상태를 관리하는 것이 중요합니다. 이번 블로그 포스트에서는 Redux를 사용하여 인증을 관리하는 방법에 대해 알아보겠습니다.

1. 상태 정의하기

먼저, Redux의 상태를 정의해야 합니다. 인증과 관련된 정보를 저장하기 위해 다음과 같은 상태를 정의할 수 있습니다.

{
    isAuthenticated: false,
    user: null,
    token: null
}

isAuthenticated는 사용자의 인증 상태를 나타내는 boolean 값이며, user는 인증된 사용자의 정보를 담는 객체입니다. token은 인증에 사용되는 JWT(JSON Web Token) 혹은 다른 인증 토큰을 저장하는데 사용됩니다.

2. 액션과 리듀서 정의하기

다음으로, 액션과 리듀서를 정의해야 합니다. 액션은 상태를 업데이트하는데 사용되며, 리듀서는 액션을 받아 상태를 업데이트하는 함수입니다.

// 액션 타입 정의
const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGOUT = 'LOGOUT';

// 액션 생성자 함수 정의
const loginSuccess = (user, token) => ({
    type: LOGIN_SUCCESS,
    payload: {
        user,
        token
    }
});

const logout = () => ({
    type: LOGOUT
});

// 리듀서 정의
const initialState = {
    isAuthenticated: false,
    user: null,
    token: null
};

const authReducer = (state = initialState, action) => {
    switch(action.type) {
        case LOGIN_SUCCESS:
            return {
                ...state,
                isAuthenticated: true,
                user: action.payload.user,
                token: action.payload.token
            };
        case LOGOUT:
            return {
                ...state,
                isAuthenticated: false,
                user: null,
                token: null
            };
        default:
            return state;
    }
};

위의 코드에서 LOGIN_SUCCESS 액션은 사용자의 로그인 성공시 발생하는 액션입니다. LOGOUT 액션은 사용자의 로그아웃시 발생하는 액션입니다. 리듀서는 각각의 액션에 대해 상태를 업데이트하여 새로운 상태를 반환합니다.

3. 스토어 생성 및 연결하기

마지막으로, Redux 스토어를 생성하고 필요한 컴포넌트와 연결합니다.

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const store = createStore(authReducer);

const App = () => {
    return (
        <Provider store={store}>
            {/* 애플리케이션 컴포넌트 */}
        </Provider>
    );
};

// 인증 상태 사용하기
const MyComponent = () => {
    const isAuthenticated = useSelector(state => state.isAuthenticated);
    const dispatch = useDispatch();

    const handleLogout = () => {
        dispatch(logout());
    };

    return (
        <div>
            {isAuthenticated ? '로그인 되었습니다.' : '로그인이 필요합니다.'}
            <button onClick={handleLogout}>로그아웃</button>
        </div>
    );
};

Redux 스토어를 생성하고, 애플리케이션 컴포넌트를 Provider로 감싸줌으로써 Redux 상태를 사용할 수 있습니다. useSelector 훅을 사용하여 상태를 조회하고, useDispatch 훅을 사용하여 액션을 디스패치할 수 있습니다.

이렇게 Redux를 사용하여 인증을 관리할 수 있습니다. Redux를 사용하는 것은 애플리케이션의 규모가 커질수록 많은 이점을 제공하며, 인증 관리도 간편하게 할 수 있습니다.

참고 문서:

Redux 공식 문서: https://redux.js.org/
React Redux 공식 문서: https://react-redux.js.org/