Redux
리액트 상태 관리 라이브러리
- 전역 상태를 관리할 때 효과적이다
효율적 : 컴포넌트의 상태 업데이트 관련 로직을 → 다른 파일로 분리시킬 수 있다 - 컴포넌트끼리 동일한 상태를 공유할 때,
여러 컴포넌트를 거치지 않고손쉽게 상태 값을 전달 및 업데이트가 가능하다
Context API vs Redux
Context API를 통해서도 똑같은 작업을 할 수 있긴 하지만
Context API가 개선되기 전에는 사용이 불편해서 주로 Redux를 사용하며 전역 상태 관리를 했다
- Context API : 단순한 전역 상태 관리만
- Redux : 체계적으로 상태 관리가 가능하기 때문에 → 프로젝트의 규모가 커지는 경우에 편리하다
Redux의 장점
- 코드의 유지보수성 높여줌
- 작업 효율성 극대화
- 아주 편리한 개발자 도구 지원
미들웨어라는 기능을 제공 → 비동기 작업을 훨씬 효율적으로 관리가 가능하다
Redux에서 사용하는 키워드 개념
액션 action
상태에 어떠한 변화가 필요하면 액션이라는 것이 발생한다
이러한 액션은 하나의 객체 로 표현된다
{
type: 'TOGGLE_VALUE';
}액션 객체는 반드시 위와 같은 type 필드를 반드시 가지고 있어야 하고 이 값을 액션의 이름 이라고 생각하면 된다
그 외의 값은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 임의로 지정할 수 있다
{
type: "ADD_TODO",
data: {
id: 1,
text: "리덕스 배우기"
}
}
{
type: "CHANGE_INPUT"
text: "안녕하세요"
}액션 생성 함수 action creator
액션 객체를 만들어주는 함수
어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데
매번 액션 객체를 직접 작성하기에는 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있기 때문에 함수로 만들어서 액션객체를 만드는 것을 관리한다
function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수의 형태
const changeInput = text => ({
type: "CHANGE_INPUT"
text
});reducer 리듀서
변화를 일으키는 함수
액션을 만들어서 발생시키면 reducer가 현재 상태와 & 액션 객체를 parameter로 받아오고
두 값을 참고하여 새로운 상태를 만들어서 반환한다
const initialState = {
counter: 1,
};
function reducer(state = initialState, action) {
switch ((action, type)) {
case INCREMENT:
return {
counter: state.counter + 1,
};
default:
return state;
}
}Store 스토어
프로젝트에 redux를 적용하기 위해서 Store를 만든다
한 개의 프로젝트에는 단 하나의 Store만 가질 수 있다
현재 애플리케이션의 상태 및 reducer + 몇 가지 중요한 내장 함수를 가진다
dispatch 디스패치 : Store의 내장함수 1
액션을 발생시킨다
이 함수는 dispatch(action) 과 같은 형태로 액션 객체를 parameter로 넣어서 호출한다
dispatch(action) 함수가 호출되면 → Store는 reducer 함수를 실행시켜서 → 새로운 상태를 만들어낸다
subscribe 구독 : Store의 내장함수 2
subscribe 함수 안에 리스너 함수를 parameter로 넣어서 호출하면
이 리스너 함수가 액션이 dispatch되어 → 상태가 업데이트 될때마다 호출된다
const listener = () => {
console.log('상태가 업데이트 됨');
};
const unsubscribe = store.subscribe(listener);
unsubscribe(); // 이후에 구독을 비활성화할 때 함수를 호출한다