Redux 상태 관리를 위한 기본 사용법

Redux 상태 관리의 기초

Redux는 JavaScript 애플리케이션의 상태 관리를 용이하게 하도록 설계된 도구입니다. 이를 통해 애플리케이션의 모든 상태를 중앙 집중화하여 관리할 수 있게 되며, 특히 크고 복잡한 구조의 애플리케이션에서 유용합니다. 이 글에서는 Redux Toolkit을 활용한 기본적인 사용법을 살펴보도록 하겠습니다.

Redux Toolkit이란?

Redux Toolkit은 Redux의 공식 패키지로, Redux를 보다 쉽게 사용할 수 있도록 다양한 기능과 도구들을 제공합니다. 전통적인 Redux 코드에서 발생할 수 있는 문제를 해결하기 위해 설계되었으며, 불필요한 보일러플레이트 코드를 줄이고, 코드의 가독성과 유지보수성을 높이는 데 도움을 줍니다.

Redux Toolkit 설치하기

Redux Toolkit은 NPM을 통해 손쉽게 설치할 수 있습니다. 아래와 같은 명령어를 사용하여 설치할 수 있습니다.

• npm install @reduxjs/toolkit
• yarn add @reduxjs/toolkit

Redux 상태 관리 구조 이해하기

Redux 앱은 주로 세 가지 중요한 개념으로 구성됩니다: Actions, Reducers, 그리고 Store입니다.

Actions

액션은 상태 변경을 설명하는 객체입니다. 액션은 반드시 type 속성을 가져야 하며, 필요한 경우 payload 속성을 포함하여 추가적인 정보를 전달할 수 있습니다.

Reducers

리듀서는 현재의 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 이 함수는 기존의 상태를 직접 변화시키지 않고, 항상 새로운 상태 객체를 반환해야 합니다. Redux Toolkit을 사용하면, createSlice 함수를 이용하여 리듀서를 간편하게 만들 수 있습니다.

Store

스토어는 애플리케이션의 전체 상태를 보관하는 곳입니다. 스토어는 생성된 리듀서를 기반으로 상태를 관리하며, 상태 변경 시 필요한 이벤트를 발생시킵니다. Redux Toolkit에서는 configureStore 함수를 제공하여 스토어를 쉽게 설정할 수 있습니다.

Redux Toolkit을 이용한 예제

아래는 Redux Toolkit을 사용하여 간단한 뉴스 데이터를 관리하는 예시입니다. 이 코드는 뉴스 데이터의 불러오기와 상태 관리를 포함하고 있습니다.

스토어 설정하기

import { configureStore, createSlice } from '@reduxjs/toolkit';
const newsSlice = createSlice({
  name: 'news',
  initialState: {
    loading: false,
    data: [],
  },
  reducers: {
    setLoading(state) {
      state.loading = true;
    },
    setNewsData(state, action) {
      state.data = action.payload;
      state.loading = false;
    },
  },
});
const store = configureStore({
  reducer: {
    news: newsSlice.reducer,
  },
});
export const { setLoading, setNewsData } = newsSlice.actions;
export default store;

컴포넌트에서 스토어 사용하기

React 컴포넌트에서 Redux 상태를 불러오기 위해 useSelector와 useDispatch 훅을 사용할 수 있습니다. 아래의 코드는 뉴스 데이터를 불러오는 예시입니다.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setLoading, setNewsData } from './store';
const NewsComponent = () => {
  const dispatch = useDispatch();
  const newsData = useSelector(state => state.news.data);
  const loading = useSelector(state => state.news.loading);
  useEffect(() => {
    const fetchNews = async () => {
      dispatch(setLoading());
      const response = await fetch('https://example.com/api/news');
      const data = await response.json();
      dispatch(setNewsData(data));
    };
    fetchNews();
  }, [dispatch]);
  return (
    

      {loading ? 
Loading...
 : newsData.map(news => 
{news.title}
)}
    
  );
};
export default NewsComponent;

Redux 상태 관리의 장점

Redux의 가장 큰 장점은 중앙 집중식 상태 관리입니다. 중앙에서 관리되는 상태는 애플리케이션의 어떤 부분에서도 접근할 수 있으며, 전역적으로 관리하기 때문에 상태의 일관성을 유지하기 용이합니다. 또한 Redux의 단방향 데이터 흐름은 디버깅과 테스트를 개선하고, 예측 가능한 상태 변경을 가능하게 합니다.

결론

Redux는 복잡한 애플리케이션의 상태 관리를 위한 강력한 도구입니다. Redux Toolkit을 사용하면 더욱 간편하게 Redux를 적용할 수 있으며, 보일러플레이트 코드를 줄이고 코드의 품질을 높일 수 있습니다. 이 글을 통해 Redux의 기초를 이해하고, 실제 프로젝트에 활용하는 데 도움이 되었기를 바랍니다.

자주 물으시는 질문