일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- underscores
- nqueens
- 개발
- array
- 취업
- 초보
- this
- 자바스크립트
- 클라이언트
- method
- react
- grpahQL
- 코드스테이츠
- JS
- JavaScript
- 일상
- ftech
- underbar
- vscode
- 코딩
- 공부
- 해커톤
- DOM
- 포스기
- 리액트
- 알고리즘
- 연습
- 엔퀸즈
- 제일어려워
- Instantiation Patterns
- Today
- Total
analogcoding
Redux 란? (+example) 본문
Redux 란?
웹이 넓어질수록 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다.
항상 변하는 상태를 관리하기란 어렵습니다. 모델이 다른 모델을 업데이트하고, 그리고 뷰가 모델을 업데이트 할 수 있고,
이 뷰가 다시 다른 모델을 업데이트하고, 이에 따라 또 다른 뷰가 업데이트 됩니다.
어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 됩니다. 이에 대한 해결책으로 나온 리덕스는,
가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다.
또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다.
즉 리덕스는 글로벌 상태 관리를 하게 될 때 굉장히 효과적입니다.
Redux 가 필요한 상황
-
시간에 따라 바뀌는 충분한 양의 데이터가 있다
-
상태를 위한 단 하나의 원천이 필요하다
-
모든 상태를 가지고 있기에 최상위 상태는 더 이상 적당하지 않다
Redux는 상태 관리 도구입니다. 주로 React와 함께 사용되며 다른 JavaScript 프레임 워크 또는 라이브러리와
함께 사용할 수 있습니다.
2KB (종속성 포함)로 가벼워서 응용 프로그램의 자산 크기가 커질 까 걱정할 필요가 없습니다.
Redux를 사용하면 state 를 공용의 store 라는 공간에서 관리하며 각 구성 요소는 이 store 에서 필요한 모든
상태에 액세스 할 수 있습니다.
React, Angular 등과 같은 대부분의 라이브러리는 외부 라이브러리 나 도구 없이도 구성 요소가 내부적으로
상태를 관리 할 수있는 방법이 존재합니다. 그렇지만 구성 요소가 적은 응용 프로그램에는 적합하지만 프로젝트
규모가 커질수록 구성 요소 간에 공유되는 state 를 관리하는 것이 점점 어려워 집니다.
example
간단한 카운터 생성
1. action type 설정
action 함수에 type 을 설정합니다.
const INCREMENT = 'counter/INCREMENT';
const DECREMENT = 'counter/DECREMENT';
// "액션의 종류를 한번에 식별할 수 있는 문자열 혹은 심볼"
2. action 함수 생성
reducer 에 전달되는 함수로 payload 의 지정한 값을 사용할 수 있습니다.
/*{
type: INCREMENT,
// payload: "액션의 실행에 필요한 임의의 데이터",
}*/
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
3. initial State 지정
state 의 초기 값을 지정합니다. (reducer 에 state 에 초기 값으로 사용됩니다.)
const initialState = {
number: 0,
};
4. reducer 생성
인자로 받은 action 에 따라 state 를 변경해주는 역할입니다. case 에 따라 state 를 immutable 하게 변경합니다.
(default 로는 state 를 리턴합니다.)
export default function counter(state = initialState, action) {
switch (action.type) {
// 액션 타입에 따라 switch
// Spread operator 사용으로 state 값을 각각 새로운 객체와 배열에 복제 후 수정
case INCREMENT:
return {
...state,
number: state.number + 1,
};
case DECREMENT:
return {
...state,
number: state.number - 1,
};
default:
// https://stackoverflow.com/questions/4649423/should-switch-statements-always-contain-a-default-clause
return state;
}
}
5. store 생성 ( with provider )
state 를 관리하고 props 로 전달해줄 공간 store 를 생성합니다.
Provider 는 컴포넌트로, 하위 컴포넌트들이 Provider를 통해 redux store에 접근이 가능해집니다.
import { createStore } from 'redux';
import { Provider } from 'react-redux';
const store = createStore(rootReducer);
//
// console.log(store.getState()); => store 값 확인
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
++reducer 가 여러개일 경우?
import { combineReducers } from 'redux';
// 여러개로 나뉘어진 reducer 들을 serve 라고 칭하고 하나로 합쳐진 것을 root 라고 한다.
import counter from './counter';
export default combineReducers({
counter,
// 여러 reducer 를 여기에 넣어줍니다.
});
/*
{
counter: {
number: 0,
},
// ... 다른 reducer 에서 사용하는 initial state 들
}
*/
6. component 생성
import React from 'react';
import './Counter.css';
const Counter = ({ color, onIncrement, onDecrement }) => {
console.log('store 에서 받아온 값==>', value);
// 처음 설정된 initial state 값이 들어오겠죠?
return (
<div className="Counter">
<h1>{value}</h1>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
);
};
export default Counter;
7. props 로 store state 를 받아 전달해주는 Contatiner component 생성
import React, { Component } from 'react';
import { connect } from 'react-redux';
// connect는 react-redux 의 내장 API 입니다.
// 이 함수는 React Component 를 Redux Store에 ‘연결’ 해줍니다.
import Counter from '../components/Counter';
import { increment, decrement } from '../store/modules/counter';
class CounterContainer extends Component {
handleIncrement = () => {
this.props.increment();
// action 함수 increment 가 실행 -> type 에 맞는 reducer 실행 -> state 변경 -> props 로 전달
};
handleDecrement = () => {
this.props.decrement();
};
render() {
const { number } = this.props;
console.log(number);
return (
<Counter
// color={color}
value={number}
onIncrement={this.handleIncrement}
onDecrement={this.handleDecrement}
/>
);
}
}
7
const mapStateToProps = ({ counter }) => ({
number: counter.number,
});
const mapDispatchToProps = { increment, decrement };
export default connect(
mapStateToProps,
mapDispatchToProps
)(CounterContainer);
mapStateToProps() 함수에서 return 된 값이, 해당 컴포넌트의 props 로 들어갑니다.
이 mapStateToProps 함수를 마지막 줄 connect의 첫 번째 인자로 받습니다.
( 컴포넌트는 렌더링 될 때, store 를 props로 전달받습니다. )
mapDispatchToProps() 함수는 store에 접근한 컴포넌트가 store의 상태를 바꾸기 위해
dispatch 를 사용할수 있게 만들어줍니다.
참고자료
'Be well coding > Learn more' 카테고리의 다른 글
React Component , States , Props , Life cycle (0) | 2019.10.08 |
---|---|
React start (0) | 2019.10.07 |
Moment.js 를 사용해보자 ( with 'cdn' ) (0) | 2019.09.25 |
Prettier 란 ? , Prettier 설치 (0) | 2019.09.18 |
ESlint 란 ? , ESlint 설치 (0) | 2019.09.18 |