[react] 리액트 네이티브에서의 리덕스 상태 초기 데이터 로딩

22 Dec 2023

react

리액트 네이티브 애플리케이션에서 리덕스를 사용하다 보면 초기 데이터를 로딩하는 것이 중요합니다. 이 글에서는 리액트 네이티브 앱에서 리덕스 상태를 초기화하고 데이터를 로딩하는 방법을 알아보겠습니다.

1. 리덕스 상태 초기화

리액트 네이티브 앱에서 리덕스를 사용하여 상태를 관리할 때, 앱이 시작될 때 리덕스 상태를 초기화해야 합니다. 일반적으로 앱이 시작될 때 초기 데이터를 불러와 리덕스 상태를 설정합니다.

예를 들어, App.js 파일에서 다음과 같이 초기 데이터를 불러와 리덕스 상태를 설정할 수 있습니다.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchInitialData } from './actions';

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

  useEffect(() => {
    dispatch(fetchInitialData());
  }, [dispatch]);

  // 앱의 나머지 부분 렌더링
}

위 코드에서 fetchInitialData 액션을 디스패치하여 초기 데이터를 불러옵니다.

2. 데이터 로딩 상태 처리

초기 데이터를 불러오는 동안 로딩 상태를 처리해야합니다. 이를 위해 리덕스 상태에 isLoading과 같은 필드를 추가하여 데이터가 로딩 중인지 여부를 추적할 수 있습니다.

리덕스 액션을 디스패치하여 데이터를 로딩하고 있는 동안 isLoading 상태를 true로 설정하고, 데이터 로딩이 완료되면 isLoading 상태를 false로 설정합니다.

예시:

// 액션에서
const fetchInitialData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_INITIAL_DATA_REQUEST' });

    try {
      // 데이터를 불러옴
      dispatch({ type: 'FETCH_INITIAL_DATA_SUCCESS', data });
    } catch (error) {
      dispatch({ type: 'FETCH_INITIAL_DATA_FAILURE', error });
    }
  };
};

// 리듀서에서
const initialState = {
  data: null,
  isLoading: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_INITIAL_DATA_REQUEST':
      return {
        ...state,
        isLoading: true,
      };
    case 'FETCH_INITIAL_DATA_SUCCESS':
      return {
        data: action.data,
        isLoading: false,
      };
    case 'FETCH_INITIAL_DATA_FAILURE':
      return {
        ...state,
        isLoading: false,
      };
    default:
      return state;
  }
};

이제 리액트 네이티브 앱에서 리덕스를 사용하여 초기 데이터를 로딩하고 상태를 초기화하는 방법에 대해 알아보았습니다. 초기 데이터 로딩에 관련된 추가 정보를 얻고 싶다면 공식 리액트 네이티브 문서를 참고해보세요.