Colin's Blog
Redux Thunk를 이용한 동적으로 생성되는 UI 템플릿 구현하기

이번 글에서는 Redux Thunk를 이용하여 동적으로 생성되는 UI 템플릿을 구현하는 방법에 대해 알아보겠습니다. UI 템플릿은 사용자의 입력에 따라 동적으로 변경되는 경우가 많으며, 이를 효율적으로 관리하기 위해 Redux Thunk를 사용할 수 있습니다.

Redux Thunk란?

Redux Thunk는 Redux 미들웨어로, 비동기 액션을 처리할 수 있도록 도와줍니다. 이를 사용하면 액션 생성자에서 비동기 작업을 수행하고, 해당 작업이 완료된 후에 액션을 디스패치할 수 있습니다.

동적 UI 템플릿 구현 방법

  1. 액션 생성자 작성하기: 
     export const fetchTemplate = () => {
   return (dispatch) => {
     dispatch(fetchTemplateRequest());
     // 비동기 작업 수행 (예: API 호출)
     fetch('https://api.example.com/template')
       .then((response) => response.json())
       .then((template) => {
         dispatch(fetchTemplateSuccess(template));
       })
       .catch((error) => {
         dispatch(fetchTemplateFailure(error));
       });
   };
 };

    위 코드에서는 fetchTemplate 액션 생성자를 정의하고, 비동기 작업을 수행합니다. 이후 API 호출을 통해 템플릿 데이터를 가져온 뒤, 성공 또는 실패에 따라 액션을 디스패치합니다.

  2. 리듀서 작성하기: 
     const initialState = {
   loading: false,
   template: null,
   error: null
 };

 const templateReducer = (state = initialState, action) => {
   switch (action.type) {
     case 'FETCH_TEMPLATE_REQUEST':
       return {
         ...state,
         loading: true,
         error: null
       };
     case 'FETCH_TEMPLATE_SUCCESS':
       return {
         ...state,
         loading: false,
         template: action.payload
       };
     case 'FETCH_TEMPLATE_FAILURE':
       return {
         ...state,
         loading: false,
         error: action.payload
       };
     default:
       return state;
   }
 };

 export default templateReducer;

    위 코드에서는 FETCH_TEMPLATE_REQUEST, FETCH_TEMPLATE_SUCCESS, FETCH_TEMPLATE_FAILURE 액션에 따른 상태 변화를 정의한 리듀서를 작성합니다. 초기 상태는 loading과 error를 관리하기 위한 변수들을 가지며, 템플릿 데이터는 template이라는 변수에 저장됩니다.

  3. 컴포넌트에서 액션 디스패치하기: 
     import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchTemplate } from '../actions/templateActions';

 const TemplateComponent = () => {
   const dispatch = useDispatch();
   const { loading, template, error } = useSelector((state) => state.template);

   useEffect(() => {
     dispatch(fetchTemplate());
   }, [dispatch]);

   if (loading) {
     return <div>Loading...</div>;
   }

   if (error) {
     return <div>Error occurred: {error.message}</div>;
   }

   return <div>{template && template.name}</div>;
 };

 export default TemplateComponent;

    위 코드에서는 TemplateComponent라는 컴포넌트에서 fetchTemplate 액션을 디스패치합니다. 이를 위해 useDispatch 훅을 사용하여 디스패치 함수를 가져올 수 있습니다. 그리고 useSelector 훅을 통해 templateReducer의 상태를 가져와 필요한 데이터를 렌더링합니다. 로딩 중일 때는 “Loading…“을, 에러가 발생했을 때는 에러 메시지를 렌더링하며, 성공한 경우에는 템플릿의 이름을 출력합니다.

참고 자료

© 2018 Colin. All rights reserved.