[React] 리덕스 (Redux)
📄 리덕스
리덕스는 컴포넌트 외부에서 상태 관리를 할 수 있는 리액트의 대표적인 전역 상태 관리 라이브러리입니다.
수많은 컴포넌트와 state가 있다면 props문법을 쓰기 어려울 때가 있습니다.
이런 경우에 redux를 사용합니다.
Redux를 설치하면 state를 보관할 수 있는 파일이 만들어집니다.
모든 컴포넌트들이 파일에서 state를 꺼내 쓸 수 있기 때문에 간편한 코드 작성이 가능합니다.
📄 리덕스의 장점
1. 상태관리가 용이하다.
상태관리가 용이하는 것은 state관리가 용이하다는 뜻입니다.
state를 수정해야 하는 상황에서 컴포넌트의 데이터를 직접 수정하는 것이 아니라 컴포넌트들이 Redux에 수정요청을 합니다.
수정요청을 받은 Redux는 state를 수정합니다.
2. 미들웨어를 활용한 다양한 기능 추가
데이터를 처리하는 중간과정에서 어떤 로직을 넣어서 필요한 기능을 추가할 수 있습니다.
미들웨어에서 로컬 스토리지에 데이터를 저장하거나 로컬 스토리지에서 데이터를 불러오는 기능을 간단하게 구현할 수 있습니다.
3. SSR시 데이터 전달이 간편하다.
리덕스의 상태값은 하나의 객체로 표현이 가능합니다.
서버는 상태값을 객체로 만들어 문자열로 변환해서 클라이언트로 전달하는데, 클라이언트는 받은 문자열을 하나의 객체로 변환해서 사용합니다.
하나의 객체로 관리가 되기 때문에 과거의 상태로 저장했다가 과거의 상태로 돌아가는 것을 간단히 구현할 수 있습니다.
4. 리액트 콘텍스트보다 효율적인 렌더링이 가능하다.
📄 리덕스를 사용할 때 규칙
- 하나의 애플리케이션엔 하나의 스토어가 있다. 스토어를 한개 이상 만들면 안된다.
- 상태는 읽기전용이다. 즉, 불변성을 지켜주어야 한다.
- 변화를 일으키는 함수 리듀서는 순수한 함수여야 한다. 동일한 값을 받아서 동일한 값을 반환해야 한다. ex)
new Date()xxx
📄 리덕스에서 쓰는 키워드
1. action
- 상태에 어떤 변화가 필요할 때
action을 발생시킨다. - 하나의 객체로 표현된다.
action객체는type값을 필수로 가지고 있다.
{
type: 'TOGGLE_VALUE'
data: {
id: 0,
text: "리덕스 배우기"
}
}
2. 액션 생성함수(Action Creator)
- 액션을 발생시키는 함수
- 파라미터를 받아와서 액션 객체를 만들어주는 함수
- 리덕스에서 액션 생성함수가 필수적이진 않지만 액션 객체를 더 편하게 만들 수 있다.
export function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수 버전
export function changeInput = text => ({
type: "CHANGE_INPUT",
text
});
3. 리듀서(Reducer)
- 변화를 일으키는 함수
state,action이라는 파라미터를 가져온다.- 리듀서에서는 불변성을 유지해야하므로 기존의 객체나 배열을 건드리지 않고 새로운 객체나 배열로 만들어야한다. ex)
concat,spread… default에서는 기존의state를 반환하는 것이 일반적이다.
function counter(state, action) {
switch (action.type) {
case "INCREASE":
return state + 1;
case "DECREASE":
return (state = 1);
default:
return state;
}
}
4. 스토어(store)
- 리덕스에선 하나의 애플리케이션당 하나의 스토어를 만든다.
- 스토어 안에는 현재 앱의 상태와 리듀서, 내장함수들이 들어있다.
4. 디스패치(dispatch)
- 스토어의 내장함수들 중 하나
- 액션을 발생시키는 것
- 액션을 스토어에 전달한다.
dispatch({ type: "INCREASE" });
5. 구독 (subscribe)
- 스토어의 내장함수들 중 하나
subscribe함수를 호출할 때 파라미터로 특정 함수를 넣어주면 액션이 디스패치될 때 마다 받아온 함수를 호출한다.- 리듀서를 사용할 때 직접 사용하는 일은 없다.
Leave a comment