Redux Toolkit을 이용한 자바스크립트 앱의 사진 필터링

21 Sep 2023

redux

사진 필터링은 모바일 앱이나 웹 앱에서 매우 인기 있는 기능 중 하나입니다. 사용자는 사진에 다양한 필터를 적용하여 사진을 개성있게 만들 수 있습니다. 이번 글에서는 Redux Toolkit을 이용하여 자바스크립트 앱에서 사진 필터링을 구현하는 방법을 알아보겠습니다.

Redux Toolkit 소개

Redux Toolkit은 Redux 개발을 좀 더 쉽고 효율적으로 수행할 수 있도록 다양한 기능을 제공하는 패키지입니다. 특히, Redux Toolkit은 Redux의 기본 기능을 간소화하여 개발자가 더 빠르게 앱을 구축할 수 있도록 도와줍니다.

사진 필터링 앱 구현하기

Redux Toolkit 설치하기

Redux Toolkit을 사용하기 위해서는 먼저 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 Redux Toolkit을 설치합니다.
```
npm install @reduxjs/toolkit
```

필터 상태 관리하기

Redux Toolkit을 사용하여 필터 상태를 관리합니다. 필터 상태는 Redux 스토어에 저장되며, 필터링된 이미지를 업데이트할 때 사용됩니다.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  filter: "none",
};

const filterSlice = createSlice({
  name: "filter",
  initialState,
  reducers: {
    setFilter: (state, action) => {
      state.filter = action.payload;
    },
  },
});

export const { setFilter } = filterSlice.actions;

export default filterSlice.reducer;

앱 상태 설정하기

필터 상태와 함께 앱의 기본 상태도 Redux Toolkit을 이용하여 설정합니다. 기본 상태는 앱이 처음 로드될 때의 상태입니다.

import { configureStore } from "@reduxjs/toolkit";
import filterReducer from "./filterSlice";

const store = configureStore({
  reducer: {
    filter: filterReducer,
  },
});

export default store;

필터 UI 구현하기

필터 UI는 사용자가 원하는 필터를 선택할 수 있는 인터페이스입니다. 이 예제에서는 간단한 HTML과 CSS를 사용하여 필터 UI를 구현합니다.

<select id="filter-select">
  <option value="none">No Filter</option>
  <option value="blur">Blur</option>
  <option value="sepia">Sepia</option>
  <option value="grayscale">Grayscale</option>
  <option value="invert">Invert</option>
</select>

필터 적용하기

필터를 선택하고 적용하기 위해 이벤트 리스너를 추가합니다. Redux Toolkit의 setFilter 액션을 디스패치하여 필터 상태를 업데이트합니다.

import { setFilter } from "./filterSlice";

const filterSelect = document.getElementById("filter-select");

filterSelect.addEventListener("change", (event) => {
  const selectedFilter = event.target.value;
  store.dispatch(setFilter(selectedFilter));
});

사진 필터링하기

필터 상태가 변경될 때마다 사진에 필터를 적용합니다. 필터링된 이미지는 HTML의 data-filter 속성을 이용하여 적용된 필터를 나타냅니다.

store.subscribe(() => {
  const filteredImage = document.getElementById("filtered-image");
  const selectedFilter = store.getState().filter.filter;
  filteredImage.setAttribute("data-filter", selectedFilter);
});

결론

Redux Toolkit을 사용하여 자바스크립트 앱에서 사진 필터링 기능을 구현하는 방법에 대해 알아보았습니다. Redux Toolkit을 이용하면 Redux 개발을 더욱 효율적으로 수행할 수 있으며, 코드를 간결하게 작성할 수 있습니다. 사진 필터링은 사용자에게 매우 인기 있는 기능이므로, Redux Toolkit을 사용하여 구현하는 것은 앱의 사용성을 향상시키는 좋은 방법입니다.

#JavaScript #ReduxToolkit