리액트와 Redux를 사용한 상태 관리
Redux 소개 및 기본 개념
Redux는 상태를 중앙에서 관리하는 라이브러리로, 리액트 애플리케이션에서 복잡한 상태를 보다 쉽게 관리할 수 있게 해줍니다. Redux의 핵심 개념은 스토어(Store), 액션(Action), **리듀서(Reducer)**입니다. 스토어는 애플리케이션의 전체 상태를 저장하고, 액션은 상태를 변경하기 위한 이벤트를 나타내며, 리듀서는 이 액션에 따라 새로운 상태를 반환하는 순수 함수입니다. Redux를 사용하면, 상태 변경이 예측 가능하고, 애플리케이션의 상태 흐름을 일관되게 유지할 수 있습니다.
Redux 스토어(Store) 설정하기
Redux의 상태는 스토어에서 관리됩니다. 스토어는 애플리케이션의 전체 상태를 포함하고 있으며, createStore 함수를 사용하여 설정합니다. 리액트에서 Redux를 사용하려면, Provider 컴포넌트를 통해 리액트 컴포넌트 트리에 스토어를 제공해야 합니다. 이를 통해 컴포넌트는 connect 함수를 사용하여 스토어에 접근하고, 상태를 가져오거나 액션을 디스패치(dispatch)할 수 있습니다. 스토어는 상태 변경을 관리하고, 컴포넌트는 이 상태를 구독하여 변경 사항을 반영합니다.
액션(Action)과 액션 생성자(Action Creators)
액션은 상태를 변경할 수 있는 사건이나 요청을 나타냅니다. 액션은 반드시 type 속성을 가져야 하며, 선택적으로 다른 데이터를 포함할 수 있습니다. 액션을 디스패치할 때는 dispatch 함수가 사용됩니다. 액션 생성자는 이러한 액션을 반환하는 함수입니다. 예를 들어, 로그인 성공 후 사용자 정보를 업데이트하는 액션을 생성할 수 있습니다. 액션 생성자는 액션을 생성하는 함수를 추상화하여, 액션을 보다 쉽게 관리하고 재사용할 수 있도록 도와줍니다.
리듀서(Reducer)와 상태 변화
리듀서는 액션을 기반으로 상태를 변화시키는 순수 함수입니다. 리듀서는 현재 상태와 액션을 인자로 받아서 새로운 상태를 반환합니다. 리듀서는 이전 상태를 변경하지 않고 새로운 상태를 반환하는 방식으로 불변성을 유지해야 합니다. 예를 들어, 로그인 상태나 사용자 정보를 관리하는 리듀서를 작성할 수 있습니다. 리듀서는 switch 문을 사용하여 액션의 type에 맞는 로직을 처리하고, 필요한 상태 변경을 반환합니다.
리액트에서 Redux 연결하기 (React-Redux)
리액트와 Redux를 연결하기 위해 react-redux 라이브러리를 사용합니다. connect 함수는 리액트 컴포넌트와 Redux 스토어를 연결하는 데 사용됩니다. connect 함수는 두 가지 주요 인자, 즉 mapStateToProps와 mapDispatchToProps를 받습니다. mapStateToProps는 Redux 스토어의 상태를 리액트 컴포넌트의 props로 매핑하고, mapDispatchToProps는 액션을 디스패치하는 함수를 props로 매핑합니다. 또한, useSelector와 useDispatch 훅을 사용하여 함수형 컴포넌트에서도 Redux 상태와 액션을 쉽게 다룰 수 있습니다. 이를 통해 리액트 컴포넌트에서 Redux의 상태를 가져오고, 액션을 디스패치할 수 있습니다.