자바스크립트 Redux Toolkit을 활용한 소셜 미디어 API 통합 방법

21 Sep 2023

redux

Redux Toolkit Logo

소개

소셜 미디어 API를 통합하여 웹 앱에 소셜 미디어 기능을 추가하는 것은 많은 개발자들이 직면하는 과제입니다. 이러한 작업을 보다 효율적으로 처리하기 위해 자바스크립트 Redux Toolkit을 사용할 수 있습니다. Redux Toolkit은 Redux를 간소화하고 보일러플레이트 코드를 줄여주는 도구 모음입니다.

Redux Toolkit 설치

프로젝트에서 Redux Toolkit을 사용하기 위해 다음 명령어를 사용하여 패키지를 설치합니다:

npm install @reduxjs/toolkit

또는 yarn을 사용하는 경우 다음 명령어를 사용합니다:

yarn add @reduxjs/toolkit

Redux Toolkit을 사용한 소셜 미디어 API 통합

Redux Toolkit은 액션과 리듀서를 간편하게 생성할 수 있는 다양한 기능을 제공합니다. 소셜 미디어 API 호출을 처리하는 액션과 리듀서를 만들어보겠습니다.

액션 생성

소셜 미디어 API를 호출하기 위해 필요한 액션을 생성해야 합니다. Redux Toolkit은 createAsyncThunk 함수를 제공하여 비동기 작업을 수행하는 액션을 쉽게 생성할 수 있습니다.

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

export const fetchSocialMediaData = createAsyncThunk(
  'socialMedia/fetchData',
  async () => {
    try {
      // 소셜 미디어 API 호출
      const response = await fetch('https://api.social-media.com/data');
      // 데이터를 가져와서 반환
      return await response.json();
    } catch (error) {
      // 오류 발생 시 처리
      console.error('Error fetching social media data:', error);
      throw error;
    }
  }
);

리듀서 생성

API 응답을 처리하는 리듀서를 생성해봅시다. Redux Toolkit의 createSlice 함수를 사용하여 간단하게 리듀서를 생성할 수 있습니다.

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

const socialMediaSlice = createSlice({
  name: 'socialMedia',
  initialState: {
    data: null,
    isLoading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchSocialMediaData.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(fetchSocialMediaData.fulfilled, (state, action) => {
        state.isLoading = false;
        state.data = action.payload;
      })
      .addCase(fetchSocialMediaData.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message;
      });
  },
});

export default socialMediaSlice.reducer;

사용법

위에서 생성한 액션과 리듀서를 사용하여 소셜 미디어 API를 호출하는 기능을 구현할 수 있습니다. 예를 들어, Button 컴포넌트를 클릭하여 데이터를 가져오는 예제입니다.

import { useDispatch, useSelector } from 'react-redux';
import { fetchSocialMediaData } from './socialMediaSlice';

const Button = () => {
  const dispatch = useDispatch();
  
  const isLoading = useSelector((state) => state.socialMedia.isLoading);

  const handleClick = () => {
    dispatch(fetchSocialMediaData());
  };

  return (
    <button onClick={handleClick} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Fetch Data'}
    </button>
  );
};

마무리

Redux Toolkit을 사용하면 소셜 미디어 API를 손쉽게 통합할 수 있습니다. createAsyncThunk 함수로 액션을 생성하고, createSlice 함수로 리듀서를 생성하여 API 호출을 처리할 수 있습니다. 이를 통해 보일러플레이트 코드를 줄이고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. #javascript #ReduxToolkit