Redux Toolkit을 활용한 자바스크립트 앱의 이미지 필터링

21 Sep 2023

redux

이미지 필터링은 웹 앱 또는 모바일 앱에서 이미지를 수정하고 개선하기 위해 널리 사용되는 기술입니다. 이 기능을 구현하면 사용자가 이미지에 다양한 필터를 적용하여 원하는 효과를 얻을 수 있습니다. 이번 블로그 포스트에서는 Redux Toolkit을 활용하여 자바스크립트 앱에서 이미지 필터링을 구현하는 방법을 알아보겠습니다.

Redux Toolkit 소개

Redux Toolkit은 Redux를 더 쉽고 간편하게 사용하기 위해 만들어진 공식 Redux 패키지입니다. Redux Toolkit은 Redux를 설정하고 관리하는 번거로운 작업을 최소화하면서 개발자들이 더 짧은 코드로 Redux 애플리케이션을 작성할 수 있도록 도와줍니다. 이를 통해 Redux 앱의 생산성을 크게 향상시킬 수 있습니다.

이미지 필터링 앱 구현하기

1. Redux Toolkit 설치 및 설정

Redux Toolkit을 사용하기 위해서는 먼저 프로젝트에 Redux Toolkit을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 Redux Toolkit을 설치합니다:

npm install @reduxjs/toolkit

설치가 완료되면 Redux Toolkit을 설정하기 위해 store 디렉토리를 생성하고 다음 코드를 store.js 파일에 추가합니다:

import { configureStore } from '@reduxjs/toolkit';

// TODO: 필요한 리듀서들을 import합니다.

const store = configureStore({
  reducer: {
    // TODO: 리듀서들을 추가합니다.
  },
});

export default store;

2. 필터링 기능을 위한 Redux 액션 및 리듀서 작성

이제 필터링 기능을 위한 Redux 액션과 리듀서를 작성해보겠습니다. store 디렉토리에 filters.js 파일을 생성하고 다음 코드를 추가합니다:

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

const filtersSlice = createSlice({
  name: 'filters',
  initialState: {
    brightness: 0,
    contrast: 0,
    saturation: 0,
    // TODO: 필요한 필터 속성들을 추가합니다.
  },
  reducers: {
    setBrightness: (state, action) => {
      state.brightness = action.payload;
    },
    setContrast: (state, action) => {
      state.contrast = action.payload;
    },
    setSaturation: (state, action) => {
      state.saturation = action.payload;
    },
    // TODO: 필터 속성에 대한 setter 액션들을 추가합니다.
  },
});

export const { setBrightness, setContrast, setSaturation } = filtersSlice.actions;
export default filtersSlice.reducer;

3. 이미지 컴포넌트에 필터 속성 추가

이제 이미지를 보여줄 컴포넌트에서 필터 속성을 Redux 스토어에서 가져와 적용할 수 있도록 수정해보겠습니다. 이미지를 렌더링하는 컴포넌트에서 다음과 같이 코드를 수정합니다:

import React from 'react';
import { useSelector } from 'react-redux';

const ImageComponent = () => {
  const brightness = useSelector((state) => state.filters.brightness);
  const contrast = useSelector((state) => state.filters.contrast);
  const saturation = useSelector((state) => state.filters.saturation);

  return (
    <img
      src="image.jpg"
      style={{
        filter: `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%)`,
      }}
    />
  );
};

export default ImageComponent;

4. 필터 컨트롤 UI 구현하기

마지막으로 필터를 조정할 수 있는 UI를 구현해보겠습니다. 필터를 조정하는 컴포넌트에서 다음과 같이 코드를 작성합니다:

import React from 'react';
import { useDispatch } from 'react-redux';
import { setBrightness, setContrast, setSaturation } from './store/filters';

const FilterControls = () => {
  const dispatch = useDispatch();

  const handleBrightnessChange = (e) => {
    dispatch(setBrightness(e.target.value));
  };

  const handleContrastChange = (e) => {
    dispatch(setContrast(e.target.value));
  };

  const handleSaturationChange = (e) => {
    dispatch(setSaturation(e.target.value));
  };

  return (
    <div>
      <label htmlFor="brightness">Brightness:</label>
      <input
        type="range"
        id="brightness"
        min="-100"
        max="100"
        onChange={handleBrightnessChange}
      />

      <label htmlFor="contrast">Contrast:</label>
      <input
        type="range"
        id="contrast"
        min="-100"
        max="100"
        onChange={handleContrastChange}
      />

      <label htmlFor="saturation">Saturation:</label>
      <input
        type="range"
        id="saturation"
        min="-100"
        max="100"
        onChange={handleSaturationChange}
      />
    </div>
  );
};

export default FilterControls;

마무리

이제 Redux Toolkit을 활용하여 자바스크립트 앱에서 이미지 필터링 기능을 구현하는 방법을 알아봤습니다. Redux Toolkit을 사용하면 Redux 상태 관리의 번거로움을 줄이고, 간결하고 효율적인 코드를 작성할 수 있습니다. 이미지 필터링을 통해 앱에 독특하고 흥미로운 기능을 추가하여 사용자 경험을 향상시킬 수 있습니다.

#javascript #redux #redux-toolkit #이미지필터링