리덕스를 통한 리액트 상태관리
상태관리! 왜 필요할까?
리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용합니다!
또, 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 정말 뷰만 관리할 수 있잖아요!
코드가 깔끔해질테니, 유지보수에도 아주 좋겠죠. 🙂
상태관리 흐름을 알아보자!
[상태관리 흐름도]
딱 4가지만 알면 됩니다! Store, Action, Reducer, 그리고 Component!
아주 큰 흐름만 잘 파악해도 굳굳!
- (1) 리덕스 Store를 Component에 연결한다.
- (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
- (3) Reducer를 통해서 새로운 상태 값을 만들고,
- (4) 새 상태값을 Store에 저장한다.
- (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠죠?)
리덕스 패키지 설치 & 공식문서 보기
리덕스는 아주 흔히 사용하는 상태관리 라이브러리입니다.
전역 상태관리를 편히 할 수 있게 해주는 고마운 친구죠!
-
리덕스 패키지 설치하기
yarn add redux react-redux
리덕스 개념과 용어
리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구입니다.
아래 용어들은 리덕스의 기본 용어인데, 여러분이 키워드 삼기 좋은 용어들이에요. 앞으로 자주 볼 단어들이니 미리 친해집시다!
-
(1) State
리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요.
딕셔너리 형태({[key]: value})형태로 보관합니다. -
(2) Action
상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것입니다.
// 액션은 객체예요. 이런 식으로 쓰여요. type은 이름같은 거예요! 저희가 정하는 임의의 문자열을 넣습니다. {type: 'CHANGE_STATE', data: {...}} -
(3) ActionCreator
액션 생성 함수라고도 부릅니다. 액션을 만들기 위해 사용합니다.
//이름 그대로 함수예요! const changeState = (new_data) => { // 액션을 리턴합니다! (액션 생성 함수니까요. 제가 너무 당연한 이야기를 했나요? :)) return { type: 'CHANGE_STATE', data: new_data } } -
(4) Reducer
리덕스에 저장된 상태(=데이터)를 변경하는 함수입니다.
우리가 액션 생성 함수를 부르고 → 액션을 만들면 → 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 → 새로운 데이터를 만들고 → 리턴해줍니다.// 기본 상태값을 임의로 정해줬어요. const initialState = { name: 'mean0' } function reducer(state = initialState, action) { switch(action.type){ // action의 타입마다 케이스문을 걸어주면, // 액션에 따라서 새로운 값을 돌려줍니다! case CHANGE_STATE: return {name: 'mean1'}; default: return false; } } -
(5) Store
우리 프로젝트에 리덕스를 적용하기 위해 만드는 거예요!
스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있습니다.
생김새는 딕셔너리 혹은 json처럼 생겼어요.
내장함수를 어디서 보냐구요? → 공식문서에서요! 😉 -
(6) dispatch
디스패치는 우리가 앞으로 정말 많이 쓸 스토어의 내장 함수예요!
액션을 발생 시키는 역할을 합니다.// 실제로는 이것보다 코드가 길지만, // 간단히 표현하자면 이런 식으로 우리가 발생시키고자 하는 액션을 파라미터로 넘겨서 사용합니다. dispatch(action);
몰라도 되는, 하지만 알면 재미있는 이야기
리덕스는 사실, 리액트와 별도로 사용할 수 있는 친구입니다. 상태관리를 위해 다른 프론트엔드 프레임워크/라이브러리와 함께 쓸 수 있어요.
리덕스의 3가지 특징
-
(1) store는 1개만 쓴다!
리덕스는 단일 스토어 규칙을 따릅니다. 한 프로젝트에 스토어는 하나만 씁니다.
-
(2) store의 state(데이터)는 오직 action으로만 변경할 수 있다!
리액트에서도 state는 setState()나, useState() 훅을 써서만 변경 가능했죠!
데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함입니다.
불변성 뭐냐구요? 간단해요! 허락없이 데이터가 바뀌면 안된단 소리입니다!조금 더 그럴 듯하게 말하면, 리덕스에 저장된 데이터 = 상태 = state는 읽기 전용입니다.
그런데... 액션으로 변경을 일으킨다면서요? 리듀서에서 변한다고 했잖아요?
→ 네, 그것도 맞아요. 조금 더 정확히 해볼까요!
가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼웁니다!
즉, A에 +1을 할 때,
A = A+1이 되는 게 아니고, A' = A+1이라고 새로운 값을 만들고 A를 A'로 바꾸죠. -
(3) 어떤 요청이 와도 리듀서는 같은 동작을 해야한다!
리듀서는 순수한 함수여야 한다는 말입니다.
순수한 함수라는 건,- 파라미터 외의 값에 의존하지 않아야하고,
- 이전 상태는 수정하지(=건드리지) 않는다. (변화를 준 새로운 객체를 return 해야합니다.)
- 파라미터가 같으면, 항상 같은 값을 반환
- 리듀서는 이전 상태와 액션을 파라미터로 받는다.
덕스(ducks) 구조
- 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성합니다.
(액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성합니다.) - 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성합니다.
(버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reducer를 한 파일에 넣는 거예요.) - 덕스 구조로 리덕스 모듈을 만들어볼거예요!
[외울 필요 없어요!]
덕스 구조를 잘 설명해 주는 사이트가 있습니다. 😉 헷갈리실 때 들어가서 읽어보시면 되고, 모듈을 새로 만들 때 복사해서 쓰셔도 좋습니다.
[사이트 바로가기→](https://github.com/erikras/ducks-modular-redux)
리덕스 모듈 예제
```jsx
// widgets.js
// Actions
const LOAD = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
// Reducer
export default function reducer(state = {}, action = {}) {
switch (action.type) {
// do reducer stuff
default: return state;
}
}
// Action Creators
export function loadWidgets() {
return { type: LOAD };
}
export function createWidget(widget) {
return { type: CREATE, widget };
}
export function updateWidget(widget) {
return { type: UPDATE, widget };
}
export function removeWidget(widget) {
return { type: REMOVE, widget };
}
// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}
```첫번째 모듈 만들기
일단 폴더부터 만들어요!
src 폴더 아래에 redux라는 폴더를 만들고, 그 안에 modules라는 폴더를 만들어주세요.
modules 아래에 bucket.js라는 파일을 만들고 리덕스 모듈 예제를 붙여넣어주세요.
아래 과정을 하나하나 밟으며 버킷리스트 항목을 리덕스에서 관리하도록 고쳐봅시다!
-
(1) Action
우리는 지금 버킷리스트를 가져오는 것, 생성하는 것 2가지 변화가 있죠?
두 가지 액션을 만듭시다.// 액션 타입을 정해줍니다. const LOAD = "bucket/LOAD"; const CREATE = "bucket/CREATE"; -
(2) initialState
초기 상태값을 만들어줄거예요! 그러니까, 기본 값이죠.
// 초기 상태값을 만들어줍니다. const initialState = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; -
(3) Action Creactor
액션 생성 함수를 작성합니다.
// 액션 생성 함수예요. // 액션을 만들어줄 함수죠! export const loadBucket = (bucket) => { return { type: LOAD, bucket }; }; export const createBucket = (bucket) => { return { type: CREATE, bucket }; }; -
(4) Reducer
리듀서를 작성합니다.
load할 땐, 가지고 있던 기본값을 그대로 뿌려주면 되겠죠?
create할 땐, 새로 받아온 값을 가지고 있던 값에 더해서 리턴해주면 될거예요!
(우리는 action으로 넘어오는 bucket이 text값인 걸 알고 있죠! 이미 추가해봤잖아요.)// 리듀서예요. // 실질적으로 store에 들어가 있는 데이터를 변경하는 곳이죠! export default function reducer(state = initialState, action = {}) { switch (action.type) { // do reducer stuff case "bucket/LOAD": return state; case "bucket/CREATE": const new_bucket_list = [...state.list, action.bucket]; return { list: new_bucket_list }; default: return state; } } -
(5) Store
redux 폴더 하위에 configStore.js 파일을 만들고 스토어를 만들어볼게요!
//configStore.js import { createStore, combineReducers } from "redux"; import bucket from "./modules/bucket"; // root 리듀서를 만들어줍니다. // 나중에 리듀서를 여러개 만들게 되면 여기에 하나씩 추가해주는 거예요! const rootReducer = combineReducers({ bucket }); // 스토어를 만듭니다. const store = createStore(rootReducer); export default store;
Store 연결하기
store를 다 만들었으니 이젠 컴포넌트와 연결할 차례! (끝이 다와가요!)
index.js에서 필요한 작업을 해줄거예요.
스토어를 불러오고 → 우리 버킷리스트에 주입하면 끝!
1) index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
// 우리의 버킷리스트에 리덕스를 주입해줄 프로바이더를 불러옵니다!
import { Provider } from "react-redux";
// 연결할 스토어도 가지고 와요.
import store from "./redux/configStore";
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();컴포넌트에서 리덕스 데이터 사용하기
컴포넌트에서 리덕스 액션 사용하는 법
App 컴포넌트에 있는 state를 리덕스로 교체해볼까요?
-
(1) 컴포넌트에서 리덕스 데이터 사용하기
-
-1) 리덕스 훅
리덕스도 훅이 있어요!
상태, 즉, 데이터를 가져오는 것 하나, 상태를 업데이트할 수 있는 것 하나 🙂
이렇게 두 가지를 정말 많이 쓴답니다!
더 많은 훅이 궁금하다면? (훅 보러가기→)// useDispatch는 데이터를 업데이트할 때, // useSelector는 데이터를 가져올 때 씁니다. import {useDispatch, useSelector} from "react-redux"; -
-2) BucketList.js에서 redux 데이터 가져오기
useSelector((**state**) ⇒ state.bucket)
configStore.js에서 루트 리듀서를 만들었던 거 기억하시나요?
앗, 바로 감이 오셨나요? 네, 맞아요! 여기에서 state는 리덕스 스토어가 가진 전체 데이터예요.... // redux 훅 중, useSelector를 가져옵니다. import { useSelector } from "react-redux"; const BucketList = (props) => { let history = useHistory(); // 이 부분은 주석처리! // console.log(props); // const my_lists = props.list; // 여기에서 state는 리덕스 스토어가 가진 전체 데이터예요. // 우리는 그 중, bucket 안에 들어있는 list를 가져옵니다. const my_lists = useSelector((state) => state.bucket.list); return ( <ListStyle> {my_lists.map((list, index) => { return ( <ItemStyle className="list_item" key={index} onClick={() => { history.push("/detail"); }} > {list} </ItemStyle> ); })} </ListStyle> ); }; ... -
-3) App.js에서 redux 데이터 추가하기
useSelector((**state**) ⇒ state.bucket)
configStore.js에서 루트 리듀서를 만들었던 거 기억하시나요?
앗, 바로 감이 오셨나요? 네, 맞아요! 여기에서 state는 리덕스 스토어가 가진 전체 데이터예요.-
import 부터!
// useDispatch를 가져와요! import {useDispatch} from "react-redux"; // 액션생성함수도 가져오고요! import { createBucket } from "./redux/modules/bucket"; -
useDispatch 훅 쓰기
const dispatch = useDispatch(); const addBucketList = () => { // 스프레드 문법! 기억하고 계신가요? :) // 원본 배열 list에 새로운 요소를 추가해주었습니다. // 여긴 이제 주석처리! // setList([...list, text.current.value]); dispatch(createBucket(text.current.value)); };
-
-
[코드스니펫] - App.js
import React from "react"; import styled from "styled-components"; import { Route, Switch } from "react-router-dom"; // useDispatch를 가져와요! import {useDispatch} from "react-redux"; // 액션생성함수도 가져오고요! import { createBucket } from "./redux/modules/bucket"; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from "./BucketList"; import Detail from "./Detail"; import NotFound from "./NotFound"; function App() { const text = React.useRef(null); // useHistory 사용하는 것과 비슷하죠? :) const dispatch = useDispatch(); const addBucketList = () => { // 스프레드 문법! 기억하고 계신가요? :) // 원본 배열 list에 새로운 요소를 추가해주었습니다. // 여긴 이제 주석처리! // setList([...list, text.current.value]); dispatch(createBucket(text.current.value)); }; return ( <div className="App"> <Container> <Title>내 버킷리스트</Title> <Line /> {/* 컴포넌트를 넣어줍니다. */} {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */} <Switch> {/* <Route path="/" exact render={(props) => <BucketList list={list} />} /> */} {/* 이제는 render를 사용해서 list를 넘겨줄 필요가 없죠! 버킷리스트가 리덕스에서 데이터를 알아서 가져갈거니까요! */} <Route exact path="/" component={BucketList} /> <Route exact path="/detail" component={Detail} /> <Route component={NotFound} /> </Switch> </Container> {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */} <Input> <input type="text" ref={text} /> <button onClick={addBucketList}>추가하기</button> </Input> </div> ); } const Input = styled.div` max-width: 350px; min-height: 10vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd; `; const Container = styled.div` max-width: 350px; min-height: 60vh; background-color: #fff; padding: 16px; margin: 20px auto; border-radius: 5px; border: 1px solid #ddd; `; const Title = styled.h1` color: slateblue; text-align: center; `; const Line = styled.hr` margin: 16px 0px; border: 1px dotted #ddd; `; export default App; -
[코드스니펫] - BucketList.js
// 리액트 패키지를 불러옵니다. import React from "react"; import styled from "styled-components"; import { useHistory } from "react-router-dom"; // redux 훅 중, useSelector를 가져옵니다. import { useSelector } from "react-redux"; const BucketList = (props) => { let history = useHistory(); // 이 부분은 주석처리! // console.log(props); // const my_lists = props.list; // 여기에서 state는 리덕스 스토어가 가진 전체 데이터예요. // 우리는 그 중, bucket 안에 들어있는 list를 가져옵니다. const my_lists = useSelector((state) => state.bucket.list); return ( <ListStyle> {my_lists.map((list, index) => { return ( <ItemStyle className="list_item" key={index} onClick={() => { history.push("/detail"); }} > {list} </ItemStyle> ); })} </ListStyle> ); }; const ListStyle = styled.div` display: flex; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; `; const ItemStyle = styled.div` padding: 16px; margin: 8px; background-color: aliceblue; `; export default BucketList;- (2) 상세페이지에서 버킷리스트 내용을 띄워보기
-
-1) 몇 번째 상세에 와있는 지 알기 위해, URL 파라미터를 적용하자
// App.js <Route exact path="/detail/:index" component={Detail} />//BucketList.js ... {my_lists.map((list, index) => { return ( <ItemStyle className="list_item" key={index} onClick={() => { history.push("/detail/"+index); }} > {list} </ItemStyle> ); })} ... -
-2) 상세페이지에서 버킷리스트 내용을 띄워보자
//Detail.js // 리액트 패키지를 불러옵니다. import React from "react"; // 라우터 훅을 불러옵니다. import {useParams} from "react-router-dom"; // redux hook을 불러옵니다. import { useSelector } from "react-redux"; const Detail = (props) => { // 스토어에서 상태값 가져오기 const bucket_list = useSelector((state) => state.bucket.list); // url 파라미터에서 인덱스 가져오기 const params = useParams(); const bucket_index = params.index; return <h1>{bucket_list[bucket_index]}</h1>; }; export default Detail;하아... 리덕스... 흐름은 이해하겠는데 직접사용하기가 너무 힘들다... 머리가 너무 아프다 진짜 할수있을까 싶을정도다.
일딴 반복해서 계속 듣고 쓰고 있는데 익숙해지면 좋아질꺼라고 굳게 믿고 해본다...
-
