Redux Thunk를 사용하여 권한에 따른 UI 접근 제어하기

18 Oct 2023

redux

애플리케이션에서는 사용자의 권한에 따라 다른 UI를 제공해야 할 때가 있습니다. Redux Thunk를 사용하면 권한에 따른 접근 제어를 쉽게 구현할 수 있습니다. 이번 블로그 포스트에서는 Redux Thunk를 사용하여 권한에 따라 UI 접근을 제어하는 방법에 대해 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 중 하나로, 비동기 작업을 처리하기 위해 사용됩니다. 일반적으로 Redux는 동기적인 액션만 처리할 수 있지만, Redux Thunk를 추가하면 비동기 작업을 수행할 수 있습니다. 이를 통해 비동기 작업에 따른 UI 상태 변화를 처리할 수 있습니다.

권한에 따른 UI 접근 제어하기

권한 정보를 저장하는 Redux 상태 추가하기

권한 정보는 애플리케이션 전반에서 사용되므로 Redux 상태에 저장하는 것이 좋습니다.

// actions.js

export const setPermissions = (permissions) => {
  return {
    type: 'SET_PERMISSIONS',
    permissions
  };
};

// reducers.js

const initialState = {
  permissions: []
};

export const permissionsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_PERMISSIONS':
      return {
        ...state,
        permissions: action.permissions
      };
    default:
      return state;
  }
};

권한 체크하는 Thunk 액션 생성자 생성하기

UI에서 특정 요소의 접근 제어가 필요한 경우, 해당 요소의 권한을 체크하고 UI에 반영하는 작업을 수행해야 합니다. 이를 위해 Thunk 액션 생성자를 생성합니다.

// actions.js

export const checkPermission = (requiredPermission) => {
  return (dispatch, getState) => {
    const { permissions } = getState().permissions;

    if (permissions.includes(requiredPermission)) {
      // 권한이 있는 경우
      dispatch({ type: 'ALLOW_ACCESS' });
    } else {
      // 권한이 없는 경우
      dispatch({ type: 'DENY_ACCESS' });
    }
  };
};

권한 체크하는 Thunk 액션 실행하기

UI에서 특정 요소의 접근 제어가 필요한 경우, 해당 요소의 권한을 체크하는 Thunk 액션을 실행합니다.

// components/RestrictedComponent.js

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { checkPermission } from '../actions';

const RestrictedComponent = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(checkPermission('admin'));
  }, []);

  return (
    <div>
      {/* 권한에 따라 UI를 제어하는 로직 추가 */}
    </div>
  );
};

export default RestrictedComponent;

UI 상태에 따른 접근 제어하기

Thunk 액션을 실행하고 나면, Redux 상태에 따라 UI를 제어할 수 있습니다. 상태에 따라 UI를 숨기거나 특정 요소의 속성을 변경할 수 있습니다.

// reducers.js

const initialState = {
  permissions: [],
  access: null
};

export const accessReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ALLOW_ACCESS':
      return {
        ...state,
        access: 'allowed'
      };
    case 'DENY_ACCESS':
      return {
        ...state,
        access: 'denied'
      };
    default:
      return state;
  }
};

// components/RestrictedComponent.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { checkPermission } from '../actions';

const RestrictedComponent = () => {
  const dispatch = useDispatch();
  const access = useSelector((state) => state.access.access);

  useEffect(() => {
    dispatch(checkPermission('admin'));
  }, []);

  return (
    <div>
      {access === 'allowed' && <p>권한이 있는 사용자만 볼 수 있는 내용입니다.</p>}
      {access === 'denied' && <p>권한이 없는 사용자에게는 접근이 제한됩니다.</p>}
    </div>
  );
};

export default RestrictedComponent;

마무리

Redux Thunk를 사용하여 권한에 따른 UI 접근 제어를 쉽게 구현할 수 있습니다. 이를 통해 사용자의 권한에 따라 다른 UI를 제공할 수 있으며, 더욱 유연하고 확장 가능한 애플리케이션을 구축할 수 있습니다.

더 자세한 내용은 Redux 공식 문서를 참고하세요.

#redux #redux-thunk