Redux Thunk를 활용한 기기 회전 감지 방법

18 Oct 2023

redux

기기의 회전 상태를 감지하고 앱의 레이아웃을 조정하는 것은 모바일 앱 개발에서 매우 중요합니다. 이 기능을 구현하기 위해 Redux Thunk를 활용할 수 있습니다. Redux Thunk는 비동기 작업을 처리하고 Redux 액션을 디스패치하는 데 사용되는 Redux 미들웨어입니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어로서, 액션 생성자 함수에서 비동기 작업을 처리할 수 있도록 해줍니다. 일반적인 Redux의 액션은 객체를 반환하지만, Thunk를 사용하면 함수를 반환하여 비동기 작업을 처리할 수 있습니다.

기기 회전 감지

Redux Thunk를 사용하여 기기의 회전 상태를 감지하려면 다음 단계를 따르면 됩니다.

Redux 상태에 현재 회전 상태를 저장하기 위한 상태 변수를 추가합니다. 예를 들어, isRotated라는 불리언 변수를 Redux 상태에 추가합니다.

const initialState = {
  isRotated: false
};

const reducer = (state = initialState, action) => {
  // ...
};

export const setIsRotated = (isRotated) => {
  return {
    type: 'SET_IS_ROTATED',
    payload: isRotated
  };
};

export const checkRotation = () => {
  return (dispatch) => {
    const isRotated = window.matchMedia('(orientation: landscape)').matches;
    dispatch(setIsRotated(isRotated));
  };
};

checkRotation 액션 생성자 함수를 작성합니다. 이 함수에서는 window.matchMedia를 사용하여 현재 회전 상태를 감지하고, setIsRotated 액션을 디스패치하여 회전 상태를 Redux 상태에 업데이트합니다.
이제 기기의 회전 상태를 감지하고 Redux 상태를 업데이트하는 액션을 디스패치할 수 있습니다. 예를 들어, App 컴포넌트의 componentDidMount 또는 useEffect 훅에서 checkRotation을 호출하면 됩니다.

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

const App = () => {
  const dispatch = useDispatch();
  const isRotated = useSelector(state => state.isRotated);

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

  return (
    <div>
      { isRotated ? <p>기기가 회전되었습니다.</p> : <p>기기가 회전되지 않았습니다.</p> }
    </div>
  );
};

export default App;

위 예시 코드에서는 App 컴포넌트가 마운트될 때 checkRotation 액션을 디스패치하고, Redux 상태에서 isRotated 변수를 가져와서 화면에 표시합니다.

이제 Redux Thunk를 사용하여 기기의 회전 상태를 감지하는 방법을 알게 되었습니다. 회전 상태가 변경될 때마다 Redux 상태를 업데이트하고 해당 변경 사항에 따라 앱의 레이아웃을 조정할 수 있습니다.

참고 자료

#React #Redux #ReduxThunk