Redux Thunk를 이용한 컴포넌트 간 데이터 공유 방법

18 Oct 2023

redux

Redux Thunk는 리덕스 미들웨어의 일종으로, 비동기 작업을 처리하고 상태를 변경하는 데 사용됩니다. 이를 이용하여 컴포넌트 간에 데이터를 공유하는 방법을 살펴보겠습니다.

Redux Thunk란 무엇인가요?

Redux Thunk는 액션 생산자(액션을 반환하는 함수)를 생성하여 비동기 작업을 처리하는 미들웨어입니다. 기본적으로 Redux는 동기적인 액션만 처리할 수 있지만, Redux Thunk를 사용하면 비동기 작업에 대한 액션을 생성할 수 있습니다.

Redux Thunk 설치하기

Redux Thunk를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. 다음 명령어를 터미널에서 실행하여 설치할 수 있습니다.

npm install redux-thunk

또는

yarn add redux-thunk

Redux Thunk 사용하기

Redux Store에 Thunk 미들웨어 추가하기

Redux Store에 Thunk 미들웨어를 추가하여 비동기 작업을 처리할 수 있도록 설정해야 합니다. createStore 함수를 호출할 때 applyMiddleware 함수를 사용하여 Thunk 미들웨어를 전달합니다.
```
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));
```

비동기 액션 생성하기

Thunk를 사용하여 비동기 작업을 처리하기 위해 액션 생산자 함수를 생성합니다. 이 함수는 일반적인 액션 객체를 반환하는 것 대신 함수를 반환합니다. 이 함수는 dispatch와 getState 매개변수를 받아올 수 있으며, 비동기 작업을 수행한 후 액션을 디스패치할 수 있습니다.

export const fetchUserData = () => {
  return (dispatch, getState) => {
    // 비동기 작업 수행
    fetch('https://api.example.com/user')
      .then(response => response.json())
      .then(data => {
        // 데이터를 받아와서 액션 디스패치
        dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
      })
      .catch(error => {
        // 에러 처리
        dispatch({ type: 'FETCH_USER_ERROR', payload: error });
      });
  };
};

컴포넌트에서 비동기 액션 실행하기

컴포넌트에서 비동기 액션을 실행하기 위해 connect 함수를 사용하여 Redux Store에 접근합니다. 액션 생산자 함수를 dispatch 함수를 통해 호출하여 비동기 작업을 시작할 수 있습니다.

import { connect } from 'react-redux';
import { fetchUserData } from '../actions/userActions';

const UserComponent = ({ user, fetchUserData }) => {
  useEffect(() => {
    // 컴포넌트 마운트 시 액션 실행
    fetchUserData();
  }, [fetchUserData]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

const mapStateToProps = state => ({
  user: state.user,
});

export default connect(mapStateToProps, { fetchUserData })(UserComponent);

위의 예제에서는 fetchUserData 액션 생산자 함수를 UserComponent 컴포넌트에서 사용하여 사용자 데이터를 가져오고 적절한 상태로 업데이트합니다.

결론

Redux Thunk를 사용하면 비동기 작업을 처리하고 컴포넌트 간에 데이터를 공유할 수 있습니다. 비동기 액션 생성 함수를 작성하여 Redux Thunk를 활용하고, 컴포넌트에서 connect 함수를 사용하여 액션을 디스패치하는 방법을 살펴보았습니다. 이를 통해 간단하고 효율적인 데이터 관리를 할 수 있게 됩니다.

#Redux #Thunk