Redux Thunk를 활용한 상태 기반 스타일링 구현 방법

18 Oct 2023

redux

스타일링은 웹 애플리케이션 개발에서 중요한 부분입니다. 과거에는 CSS를 사용하여 스타일을 정의하였지만, 최근에는 상태 기반 스타일링을 통해 동적인 스타일링을 구현하는 것이 일반적입니다. Redux Thunk를 활용하면 Redux를 사용하여 상태 기반 스타일링을 구현할 수 있습니다. 이번 글에서는 Redux Thunk를 활용한 상태 기반 스타일링을 구현하는 방법에 대해 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux 미들웨어(Middleware)의 하나로, 액션 생성자 함수에서 비동기 작업을 처리할 수 있도록 도와줍니다. 일반적으로 Redux에서 액션은 동기적으로 동작하지만, Redux Thunk를 사용하면 액션 생성자 함수 내에서 비동기 작업을 수행할 수 있습니다. 이를 통해 비동기 작업이 완료된 후에 상태를 업데이트하거나 다른 액션을 디스패치할 수 있습니다.

상태 기반 스타일링 구현 방법

Redux Thunk 및 관련 라이브러리 설치
```
npm install redux-thunk
```

Redux Thunk 미들웨어를 Redux 스토어에 적용

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

액션 생성자 함수 작성

import { fetchStyles } from './stylesActions';

export const loadStyles = () => {
  return (dispatch) => {
    dispatch(fetchStylesStart());

    // 비동기 작업 수행
    fetch('https://api.example.com/styles')
      .then((response) => response.json())
      .then((data) => {
        dispatch(fetchStylesSuccess(data));
      })
      .catch((error) => {
        dispatch(fetchStylesFailure(error));
      });
  };
};

스타일 관련 리듀서 작성

import { FETCH_STYLES_START, FETCH_STYLES_SUCCESS, FETCH_STYLES_FAILURE } from './stylesTypes';

const initialState = {
  loading: false,
  styles: [],
  error: null
};

const stylesReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_STYLES_START:
      return {
        ...state,
        loading: true
      };
    case FETCH_STYLES_SUCCESS:
      return {
        ...state,
        loading: false,
        styles: action.payload
      };
    case FETCH_STYLES_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

스타일 컴포넌트에서 상태 사용

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

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

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

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

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

  return (
    <div>
      {styles.map((style) => (
        <div key={style.id}>
          <h2>{style.title}</h2>
          <p>{style.description}</p>
        </div>
      ))}
    </div>
  );
};

이렇게 Redux Thunk를 사용하여 상태 기반 스타일링을 구현할 수 있습니다. 비동기 작업을 수행하는 액션 생성자 함수를 만들고, 이를 리듀서에서 처리하여 상태를 업데이트하면 스타일 컴포넌트에서 이를 활용할 수 있습니다. Redux Thunk를 활용하면 비동기 작업을 수행하면서도 상태 관리를 효율적으로 할 수 있습니다.

마무리

Redux Thunk를 활용한 상태 기반 스타일링 구현 방법에 대해 알아보았습니다. Redux Thunk를 사용하면 비동기 작업을 처리하는 동안에도 Redux를 이용한 상태 관리를 할 수 있습니다. 이를 통해 동적인 스타일링을 구현할 수 있으며, 코드의 유지보수성과 재사용성을 높일 수 있습니다.

참고: Redux Thunk 공식 문서 #redux #스타일링