Colin's Blog
자바스크립트 Redux Toolkit으로 모듈화된 애플리케이션 개발하기

애플리케이션을 개발할 때 코드의 모듈화는 유지 보수성과 확장성을 높이는 중요한 요소입니다. Redux Toolkit을 사용하여 자바스크립트 애플리케이션을 모듈화하는 방법에 대해 알아보겠습니다.

Redux Toolkit이란?

Redux Toolkit은 Redux를 좀 더 간편하고 효율적으로 사용할 수 있도록 도와주는 공식 Redux 라이브러리입니다. Redux Toolkit은 Redux의 주요 기능과 라이브러리들을 하나의 패키지로 제공하며, 보일러플레이트 코드의 양을 줄이고 생산성을 높여줍니다.

애플리케이션 구조 설계

자바스크립트 애플리케이션을 개발할 때 Redux Toolkit을 사용하기 위해 애플리케이션의 구조를 설계하는 것이 중요합니다. 기본적으로 Redux Toolkit은 애플리케이션의 상태(State)와 상태를 변경하는 액션(Action)을 관리합니다. 따라서 우리는 상태와 액션을 포함하는 여러 개의 리듀서(reducer)를 작성해야 합니다.

애플리케이션의 구조는 대략적으로 다음과 같을 수 있습니다:

├── src/
    ├── actions/
    ├── reducers/
    ├── components/
    ├── containers/
    ├── store.js
    └── index.js

리듀서 작성하기

Redux Toolkit을 사용하기 위해 리듀서를 작성해야 합니다. 리듀서는 상태를 변경하는 액션에 따라 상태를 변경하는 함수입니다. Redux Toolkit을 사용하면 다음과 같이 코드를 작성할 수 있습니다:

import { createSlice } from '@reduxjs/toolkit'

// 초기 상태 정의
const initialState = {
  counter: 0,
  loading: false
}

// 리듀서 생성
const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    increment: (state) => {
      state.counter++
    },
    decrement: (state) => {
      state.counter--
    },
    setLoading: (state, action) => {
      state.loading = action.payload
    }
  }
})

// 액션 생성자들을 익스포트
export const { increment, decrement, setLoading } = appSlice.actions

// 리듀서 익스포트
export default appSlice.reducer

위의 코드에서 createSlice 함수는 초기 상태와 액션에 대한 리듀서를 생성합니다. 각각의 액션은 상태를 변경하는 함수로 정의됩니다.

스토어와 연결하기

리듀서를 작성한 후에는 스토어와 연결하여 Redux Toolkit을 사용할 준비를 마무리해야 합니다. store.js 파일에서 다음과 같이 스토어를 생성할 수 있습니다:

import { configureStore } from '@reduxjs/toolkit'
import appReducer from './reducers/app'

const store = configureStore({
  reducer: {
    app: appReducer
  }
})

export default store

위의 코드에서 configureStore 함수를 사용하여 스토어를 생성하고, 리듀서를 등록합니다.

컨테이너 컴포넌트에서 사용하기

Redux Toolkit을 사용하면 컨테이너 컴포넌트에서도 손쉽게 상태와 액션을 사용할 수 있습니다. 다음은 컨테이너 컴포넌트에서 Redux Toolkit을 사용하는 예시입니다:

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement, setLoading } from '../actions/app'

const AppContainer = () => {
  const counter = useSelector(state => state.app.counter)
  const loading = useSelector(state => state.app.loading)
  const dispatch = useDispatch()

  const handleIncrement = () => {
    dispatch(increment())
  }

  const handleDecrement = () => {
    dispatch(decrement())
  }

  const handleSetLoading = (isLoading) => {
    dispatch(setLoading(isLoading))
  }

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={() => handleSetLoading(true)}>Start Loading</button>
      <button onClick={() => handleSetLoading(false)}>End Loading</button>
      {loading && <p>Loading...</p>}
    </div>
  )
}

export default AppContainer

위의 예시에서 useSelector 훅을 사용하여 상태를 가져오고, useDispatch 훅을 사용하여 액션을 디스패치합니다. 이렇게 컨테이너 컴포넌트에서 Redux Toolkit을 사용하면 상태와 액션을 쉽게 관리할 수 있습니다.

마무리

Redux Toolkit을 사용하여 자바스크립트 애플리케이션을 모듈화하는 방법을 알아보았습니다. Redux Toolkit의 강력한 기능과 편의성을 통해 애플리케이션의 개발 효율성을 높일 수 있습니다. 이를 통해 애플리케이션의 유지 보수성과 확장성을 향상시킬 수 있습니다.

#Redux #JavaScript

© 2018 Colin. All rights reserved.