리덕스의 장점
리액트는 기본적으로 단방향 데이터 플로우를 갖는다. 이 뜻은 하나의 데이터만을 가지며, 다른 컴포넌트에 데이터가 전달 될 수 있는 방법은 오직 한 가지라는 뜻을 내포한다.
그것은 바로 props 이다.
그러나 자식 컴포넌트가 많다거나 저 깊숙히 파고 들어가야 하는 prop-drilling 문제가 생긴다면 이것은 상태를 관리하는데 있어 꽤나 큰 스트레스 일 것이다. 또한 좋은 디자인 패턴도 아니다.
중간에 props를 받아 자식으로 내려주기만 하는, props와 하등 상관도 없는 그런 컴포넌트들이 props를 신경 쓰지 않는다면 얼마나 좋을까.
리덕스가 이러한 문제점들을 해결한다.
그러나 매번 리덕스가 답은 아니다. 대체품으로도 Context API와 리듀서 함수를 함께 사용하기도 한다. 필자는 후자를 더 선호하지만 아직 경험이 없기 때문에 패스.
리덕스의 심플한 룰 3가지
- 상태는 오직 읽기 전용이어야 하며, 오로지 액션만이 상태 변경을 할 수 있다.
- 변경은 무조건 새로운 스태이트를 만들어야만 한다.
- dispatch(action) -> reducer -> new state- 리듀서 함수는 순수 함수어야만 한다.
리덕스 사용법
리덕스 스토어
리덕스의 createStore 메소드를 사용해 하나의 스토어를 만든다.
import { createStore } from 'redux';
const store = createStore();리듀서 함수
리덕스의 스토어는 리듀서 함수를 필요로 한다.
위에서의 createStore 메소드 안에 리듀서 함수를 넣어 준다.
import { createStore } from 'redux';
function reducer(state = initialState, action){
return state;
}
const store = createStore(reducer);리듀서 함수는 인자로 현재의 상태와 이 상태에 어떠한 액션이 필요한지, 그 액션을 실행할 때 필요한 값(payload)들이 들어간다. 마치 배열의 reduce 메소드와 비슷하다.
초기 상태값
상태의 초기 상태값을 정해주어야 한다.
const initialState = {}액션을 상태에다가 갖다 붙여버리는 디스패치
액션은 위에서 말했듯이, type 프로퍼티가 들어가 있는 plain한 객체이다. 여기에 필요한 payload 자료들을 키와 값의 형식으로 추가 해 준다.
{
type: 'add' => "ADD",
payload_key: "payload_value"
}
or
const ADD: 'ADD'
{
type: ADD,
payload_key: "payload_value"
}보통 타입은 대문자를 써준다. 아니면 스트링이 할당 된 하나의 변수를 사용하기도 한다.
액션들 분기하기
액션들은 if/else 문으로 분기하기도 하고, switch 문으로 하기도 하니 입맛따라 하면 될 것 같다.
function reducer(state = initialState, action){
switch(action.type) {
case 'ADD':
return {
// 스테이트의 변경 상태
}
default:
return state;
}
}위의 코드를 보면 디폴트로 변경되지 않은 스테이트를 리턴한다. 이것은 항상 지켜져야 한다.
항상 리듀서 함수는 어떠한 state를 리턴하여야 한다.
리액트에 리덕스 사용하기
react-redux 사용하기
모든 컴포넌트가 스토어에 접근 할 수 있도록 최상위 컴포넌트를 Provider 컴포넌트로 감싸준다.
import { Provider } from 'react-redux';
<Provider store={store}>
<App />
</Provider>이제 머리부터 발끝까지 스토어에 대한 접근 권한을 갖는다.
connect 메소드로 스토어 접근 하기
connect 메소드는 처음 마주치면 이상하게 보인다.
export default connect(mapStateToProps, mapDispatchToProps)(Component)connect 함수는 고차 함수이다.
한 번 호출 하면 함수를 리턴하며 리턴한 함수는 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴한다.
흔히 말하는 HOC 이다. higher-order component.
connect 메소드로 넘어가면 connect 메소드는 스토어에 있는 스테이트와 디스패치(액션을 실행하는 함수) 컴포넌트에 props로 넘겨준다.
mapStateToProps, mapDispatchToProps 네이밍은 관습적인 것이므로 편한걸로 네이밍 해도 괜찮을 거 같다.
그러나 hooks를 사용하면 HOC를 사용하지 않으면서 컴포넌트 내에서 상태 값과 디스패치된 함수를 사용할 수 있다.
useSelector와 useDispatch.
이 두가지를 사용할 때는 컴포넌트 props로 state와 dispatch된 함수들을 넣어주지 않기 때문에 매번 리렌더링이 되는 것을 피하기 위해 useCallback을 사용하거나 react-redux에서 제공하는 shallowEqual 함수를 useSelector의 인자로 넣어준다.
