Redux란?
공식 홈페이지에서 설명하고 있는 리엑트의 정의를 한 번 보도록 합시다. google에서도 react redux라는 키워드로 한 번 검색 후 이미지를 살펴봐주세요.
리덕스는 리엑트만을 위한 라이브러리는 아닙니다. Vue와도 잘 결합되며, React, 또는 순수 JS와도 결합이 됩니다. 설치없이 실행할 수 있는 생활코딩의 간단한 예제를 통해 Redux의 속성을 알아봅시다.
- 관련 영상
우리가 앞에서 배운 리액트에서, 클릭 이벤트가 발생했을 때, 해당 값들은 Hook을 사용해서 값의 상태를 바꿔준 후 화면에 재렌더링하여서 값들을 보여주었습니다. 즉 useState를 사용하여 리액트에게 값의 변경을 알리면, 리액트가 UI를 업데이트 하였습니다.
리덕스에서도 useState와 마찬가지로, 변하는 값들을 관리해주는 관리시스템입니다. 전역으로 또는 교차 컴포넌트들의 데이터 상태를 관리합니다. 데이터들의 값이 바뀌었을 때 그 값들을 컴포넌트들에게 전달해주고 그 값들을 다시 화면에 보여줍니다.
우선 아래 내용을 설명하기 전 리덕스 데브툴스를 설치해주세요.
정리
- React는 OOO OOOOO를 위한 JS 라이브러리
- Redux는 데이터를 OOOO 관리함으로 예측 가능하게 데이터를 관리하기 위함
- 공통점 : 복잡한 프로젝트에서 복잡도를 낮춰줌
Redux 플로우
- 하나의 중앙 데이터 store를 갖습니다.(데이터는 state(상태)를 말합니다)
- 상태값을 바뀔 때마다 데이터들의 state 값을 수정해줄 reducer 함수를 만듭니다.
- dispatch를 사용하여 reducer에게 state 값을 수정하라고(action 값을 전달) 요청합니다.
- reducer가 state값을 수정하면, subscribe를 사용하여 수정된 부분을 UI에 업로드합니다.
어렵죠? 그럼 아래와 같이 비유를 해보도록 하겠습니다.
다시 한 번 생활 코딩 예제로 돌아가 코드를 이해해보도록 하겠습니다.
데이터는 어떻게 변경될까요?
React에서 상태 값을 바꿀 때는 useState가 제공하는 setState를 사용하였습니다. 하지만 앞으로 사용할 redux에서는 state 자체에 접근하는 것도 직접 수정하는 것도 불가능합니다. 대신 Reducer 함수에게 수정을 요청합니다.
const reducer = (state = 0, action) => { switch (action.type) { // action.type이 "PLUS"라면 state 값을 1 더할 것입니다. case "PLUS": return state - 1; case "MINUS": // action.type이 "MINUS"라면 state 값을 1 뺼 것입니다. return state + 1; default: return state; // action.type이 "PLUS, MINUS" 모두 아니라면 state 값의 변화는 없습니다. } };
Redux를 사용하는 이유
상태 값을 전역으로 관리해주는 useContext과의 차이점이 무엇일까요? useContext도 불필요한 props전달을 막고 전역으로 값들을 관리해주는데 말이죠.
react Context는 단점이 있습니다. Context를 사용하려면 여러개의 세팅이 필요합니다. 그리고 Context라도 큰 프로젝트를 진행하게 된다면 복잡한 상태관리가 될 수 있습니다. 프로젝트가 클수록 관리해야할 값들은 많아지고 Provider를 더 많이 사용하게 되면서 provider안에 provider로 깊은 중첩관계가 될 수 있습니다.
하지만 변수의 수가 컨트롤 가능한 정도의 복잡하지 않은 프로젝트에서는 React에 내장되어 있는 Context를 사용하는 것이 좋을 수 있습니다. 이는 프로젝트에 교육 비용과 효용을 잘 저울질 할 필요가 있습니다.
<AuthContextProvider> <UIContextProvider> <UserForm/> </UIContextProvider> </AuthContextProvider>
Redux 설치하기
npm i redux // javascript
npm i redux-react // React js