Redux란?
리덕스는, 가장 사용률이 높은 상태관리 라이브러리
컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리
컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달
단, Redux가 무조건 해답은 아니고 Context API로도 대체 가능함!
- 그림과 같이 CreateForm 와, TodoList 간의 데이터 교류를 하기 위해서 App 이라는 부모 컴포넌트가 중간자 역할을 하여 간단한 프로젝트 같은 경우 글로벌 상태 관리를 위하여 라이브러리를 사용할 필요가 없지만, 복잡한 컴포넌트 구조이면 이야기는 달라 짐
- 앱이 지니고 있는 상태와, 상태 변화 로직이 들어있는 스토어를 통하여, 우리가 원하는 컴포넌트에 원하는 상태값과 함수를 직접 주입 가능
Redux의 필수 개념
Action
- 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생
- data type은 plain object이다. type 프로퍼티를 꼭 갖고 있다
- 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 자유
{
type: "TOGGLE_VALUE"
}
{
type: "ADD_TODO",
data: {
id: 0,
text: "리덕스 배우기"
}
}
{
type: "CHANGE_INPUT",
text: "안ㄴ"
}Action Creator(액션 생성함수)
- 액션 생성함수는, 액션을 만드는 함수
function addTodo(data) {
return {
type: "ADD_TODO",
data
};
}
// 화살표 함수로도 만들 수 있습니다.
const changeInput = text => ({
type: "CHANGE_INPUT",
text
});리듀서 (Reducer)
- 리듀서는 변화를 일으키는 함수입니다. 리듀서는 두가지의 파라미터를 받음
- 리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환
function reducer(state, action) {
// 상태 업데이트 로직
return alteredState;
}스토어 (Store)
- 리덕스에서는 한 애플리케이션 당 하나의 스토어
- 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 존재
디스패치 (dispatch)
- 디스패치는 스토어의 내장함수 중 하나
- 디스패치는, 액션을 발생 시키는 것
- dispatch 라는 함수에는 액션을 파라미터로 전달
- 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 제공
구독 (subscribe)
- 구독 또한 스토어의 내장함수 중 하나
- subscribe 함수는, 함수 형태의 값을 파라미터로 받음
- subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출
Redux의 3가지 규칙
1. 하나의 애플리케이션 안에는 하나의 스토어
하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용
여러개의 스토어를 사용하는것은 사실 가능하기는 하나, 권장되지는 않습니다.
특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있습니다. 하지만 그렇게 하면, 개발 도구를 활용하지 못하게 됩니다.
2. 상태는 읽기전용
리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 합니다. 엄청 깊은 구조로 되어있는 객체를 업데이트를 할 때도 마찬가지로, 기존의 객체는 건들이지 않고 Object.assign 을 사용하거나 spread 연산자 (...) 를 사용하여 업데이트 하는 것 처럼 리덕스에서도 마찬가지로 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주면, 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있음
3. 변화를 일으키는 함수, 리듀서는 순수한 함수
- 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받음
- 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환
- new Date 처럼 호출 시 마다 매번 달라지는 값이 아닌 항상 같은 결과값을 반환!!!
예외
- new Date() 를 사용, 랜덤 숫자를 생성, 네트워크에 요청
- 순수하지 않은 작업이므로, 리듀서 함수의 바깥에서 처리
=> 이를 보완하기 위해 리덕스 미들웨어 를 사용
React-Redux 설치
- React 에서 Redux를 사용하기 편하게 만들어진 것
- 원래 state의 변화를 감지하거나, action을 발행하려면 store.dispatch(), store.subscribe() 등의 메서드를 매번 사용해야 하는데, react-redux로 component에서 store를 쉽게 읽고, action을 쉽게 dispatch할 수 있음
npm install --save redux react-reduxRedux 사용 예시
- 위와 같이 언어모드를 바꾸는 경우 한 객체 안에 단어에 대한 여러 나라 버전을 넣어 준다음 버튼을 눌렀을 시 동시에 전부 변경하는 경우
- 화이트 모드, 블랙 모드 처럼 눌렀을 때 모든 컴포넌트의 색상이 바뀌는 경우
Front End. Dev