리덕스 개념
리덕스?
리액트의 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리로 상태 관리의 로직을 컴포넌트 밖에서 처리합니다.
리액트에서 사용하려고 만든 라이브러리지만, 리액트에 의존하지 않기때문에 리액트를 사용하지 않아도 리덕스 사용 가능 합니다.
리덕스 관련 용어
1) 스토어 : 애플리케이션의 상태 값들을 내장
2) 액션 : 상태 변화를 일으킬 때 참조하는 객체로 반드시 type을 가져야 함
3) 디스패치 : 액션을 스토어에 전달하는 것
4) 리듀서 : 상태를 변화시키는 로직이 있는 함수
5) 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 구독
그림으로 표현하면 아래와 같습니다.
리덕스 규칙
리덕스 공식 메뉴얼에서도 안내하는 규칙 세가지가 있습니다.
1) 스토어는 단 한개만 존재
2) state는 읽기 전용
3) 변화는 순수 함수로 구성
리덕스 사용
1) HTML에 Redux 관련 <script>태그 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
</body>
</html>
2) console.log로 Redux 확인
아래와 같은 명령을 실행하면 정상적으로 추가했는지 확인 가능합니다.
console.log(Redux);
콘솔창 결과
3) action 추가
실습에서는 증가와 감소 액션을 만들어서 사용 했습니다.
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const increment = (diff) => ({
type : INCREMENT
,diff : diff
});
const decrement = (diff) => ({
type : DECREMENT
,diff : diff
});
4) 리듀서 추가
리듀서는 변화를 일으키는 함수로 본 실습에서는 실질적으로 증·감하는 역할을 합니다.
state값을 초기화하는 함수도 같이 추가 했습니다.
const initialState = {
number : 0
};
function counter(state = initialState, action){
switch(action.type){
case INCREMENT:
return {number:state.number + action.diff};
case DECREMENT:
return {number:state.number - action.diff};
default :
return state;
}
}
5) 스토어 생성
파라미터로 리듀서를 넘겨줍니다.
const {createStore} = Redux;
const store = createStore(counter);
6) 구독
리액트에서 구독하는 작업은 react-defux의 connect 함수가 대신 하지만, 본 실습에서는 subscribe함수를 직접 사용 했습니다.
스토어의 상태가 변화할 때마다 호출 되고, unsubscribe함수를 반환하기 때문에 unsubscribe 함수를 호출하면 구독 취소가 가능합니다.
const unsubscribe = store.subscribe(()=>{
console.log(store.getState());
});
7) 수행
dispatch함수를 통해 액션을 넘겨줍니다.
store.dispatch(increment(1));
store.dispatch(increment(10));
store.dispatch(decrement(5));
콘솔창 결과
참고 : 리액트를 다루는 기술(저:VELOPERT)
'언어 > ReactJS' 카테고리의 다른 글
| [React ]리덕스를 사용한 상태 관리 (3) | 2019.06.14 |
|---|---|
| [React] 함수형 컴포넌트 (0) | 2019.05.21 |
| [React] 라이프 사이클 함수 (0) | 2019.05.07 |
| [React] 컴포넌트 반복 (0) | 2019.05.05 |
| [React] Ref (0) | 2019.05.02 |