리덕스: 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다.
-
리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.
-
컴포넌트 끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다.
-
프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋습니다.
- 코드의 유지 보수성도 높여주고 작업 효율도 극대화해 주기 때문입니다.
- 개발자 도구도 지원하며
- 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해줍니다.
개념 미리 정리하기
키워드 개념을 간략히 알아보겠습니다.
액션
상태에 어떠한 변화가 필요하면
액션이란 것이 발생!
이는 하나의 객체로 표현됩니다.
액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값을 액션의 이름이라고 생각하면 됩니다.
EX)
{
type: 'ADD_TODO',
data: {
id: 1,
text:'리덕스 배우기'
}
}
{
type: 'CHANGE_INPUT',
text: '안녕하세요'
}액션 생성 함수
액션 생성 함수는 액션 객체를 만들어 주는 함수 입니다.
EX)
const chanageInput = text => ({
type: 'CHANGE_INPUT',
text
});어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데
매번 액션 객체를 직접 작성하기 번거로울 수 있고, 실수를 할 수 있기 때문에 이를 방지하기 위해 함수로 만들어서 관리합니다.
리듀서
리듀서는 변화를 일으키는 함수입니다.
액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옵니다.
이 두값을 참고하여 새로운 상태를 만들어서 return !
EX)
const initialState = {
counter : 1
}
function reducer(state = initialState, action){
switch(action.type){
case INCREMENT:
return{
counter: state.counter +1
};
default:
return state;
}
}스토어
프로젝트에 리덕스를 적용하기 위해
스토어를 만듭니다.
한 개의 프로젝트는 단 하나의스토어만 가질 수 있습니다.
스토어안에는 현재 애플리케이션 상태와 리듀서, 몇 가지 중요한 내장 함수를 지니고 있습니다.
디스패치
디스패치는 스토어의 내장 함수 중 하나입니다.
디스패치는 액션을 발생 시키는 것!
dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출합니다.
이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줍니다.
구독
구독(subscribe)도 스토어의 내장 함수 중 하나입니다.
subscribe 함수안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될때 마다 호출됩니다.
EX)
const listener = () => {
console.log('상태가 업데이트됨');
}
const unsubscirbe = store.subscribe(listener);
unsubscirbe();//추후 구독을 비활성화할 때 함수를 호출리액트 없이 쓰는 리덕스
- 리덕스는 리액트에 종속되는 라이브러리가 아닙니다.
- 리덕스는 바닐라 자바스크립트와 함께 사용할 수도 있습니다.
parcel로 프로젝트 만들기
프로젝트를 구성하기 위해 Parcel이라는 도구를 사용하겠습니다. 이 도구를 사용하면 아주 쉽고 빠르게 웹 애플리케이션 프로젝트를 구성할 수 있습니다.
설치
$ npm install -g parcel-bundler
코드 작성후 실행하면 개발용 서버가 실행
$ parcel index.html
리덕스 모듈 설치
$ npm install redux
액션 타입과 액션 생성 함수 정의
프로젝트 상태에 변화를 일으키는 액션에 이름을 정의해 주었습니다. 액션 이름은 고유해야 합니다.
const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";이 액션 이름을 사용하여 액션 객체를 만드는 액션 생성 함수를 작성해 주었습니다.
액션 객체는 type 값을 만드시 갖고 있어야하고, 그 외에 상태를 업데이트 할 때 참고하고 싶은 값은 마음대로 넣으면 됩니다.
const toggleSwitch = () => ({ type: "TOGGLE_SWITCH" });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });초깃값 설정
초깃값의 형태는 자유입니다. 숫자, 문자열, 객체 일수도 있습니다.
const initialState = {
toggle: false,
counter: 0
};리듀서 함수 정의
리듀서는 변화를 일으키는 함수입니다. 함수의 파라미터로는 state와 action을 받아 옵니다.
//state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action){
//action.type에 따라 다른 작업을 처리함
switch (action.type){
case TOGGLE_SWITCH:
return {
...state, //불변성 유지
toggle: !state.toggle
};
case INCREASE:
return {
...state,
counter: state.counter + action.difference
};
case DECREASE:
return {
...state,
counter: state.counter -1
};
default:
return state;
}
}리듀서 함수가 맨 처음 호출될 때는 state 값이 undefined입니다.
해당 값이 undefined로 주어졌을 때는 initalState를 기본값으로 설정하였습니다.
- 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 합니다. (
speread연산자 사용) - 리덕스의 상태는 최대한 깊지 않은 구조로 진행하는 것이 좋습니다.
- 객체의 구조가 복잡해지거나 배열도 함께 다루는 경우
immer라이브러리를 사용하면 좀 더 쉽게 리듀서를 작성할 수 있습니다.
스토어 만들기
스토어를 만들 때는 createStore함수를 사용합니다.
파라미터에는 리듀서 함수를 넣어주어야 합니다.
const store = createStore(reducer);스토어를 생성했으니, 스토어 내장 함수들을 사용해보겠습니다.
구독하기
스토어의 상태가 바뀔 때마다 render 함수가 호출되도록
store.subscribe(render);코드를 작성해주었습니다.
subscribe 함수의 파라미터로는 함수 형태의 값을 전달해 줍니다. 이렇게 전달된 함수는 추후 액션이 발생하여 상태가 업데이트될 때마다 호출됩니다.
바닐라 자바스크립트 프로젝트에는 subscribe 함수를 직접 사용하지만, 추후 리액트 프로젝트에서 리덕스를 사용할 때는 이 함수를 직접 사용하지 않습니다.
컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-reudux라는 하이브러리가 이 작업을 대신해 주기 때문입니다.
액션 발생시키기
액션을 발생시키는 것을 디스패치라고 합니다.
디스패치는 스토어의 내장 함수 dispatch를 사용합니다.
파라미터에는 액션 객체를 넣어주면 됩니다.
divToggle.onclick = () => {
store.dispatch(toggleSwitch());
};
btnIncrease.onclick = () => {
store.dispatch(increase(1));
};
btnDecrease.onclick = () => {
store.dispatch(decrease());
};리덕스의 세 가지 규칙
리덕스를 프로젝트에서 사용할 때 지켜야 하는 세 가지 규칙이 있습니다.
1. 단일 스토어
하나의 애플리케이션 안에는 하나의 스토어
2. 읽기 전용 상태
리덕스 상태는 읽기 전용입니다.
상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 합니다.
리덕스에서 불변성을 유지해야 하는 이유)
내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문입니다. 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 좋은 성능을 유지 할 수 있는 것입니다.
3. 리듀서는 순수한 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야 합니다.
순수한 함수 조건)
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받습니다.
- 파라미터 외의 값에는 의존하면 안됩니다.
- 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환합니다.
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 합니다.
(네트워크 요청과 같은 비동기 작업은 미들웨어를 통해 관리합니다.)
