항해 17일차
벌써 항해 17일차이다. 오늘은 redux에 대해 공부하였다. 그래서 redux에 대해 써볼려고 한다.
redux
- 리덕스는 대표적인 상태 관리 JavaScript 라이브러리이다.
- 리덕스는 전역상태 관리 라이브러리이다.
- 리덕스는 useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜준다.
- 리덕스는
중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성된다.- useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.
그럼 이 redux라는 상태 관리 JavaScript 라이브러리를 왜 사용하는걸까?
어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 state를 공유하는 방법에는 불편한 점이 있다...
-
컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부모 관계가 되어야 한다.
-
조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다.
-
자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.
이러한 불편함을 없애기 위해 우리는 상태 관리 js 라이브러리인 Redux를 사용하는 것이다.
Store
store는 모든 컴포넌트에서 사용할 수 있는 Global State를 저장해놓는 저장소다. 하지만 이 state는 엄격하게 관리해야 하기 때문에 dispatch라는 함수를 통해서만 state에 접근이 가능하다고 언급했다.
import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)
Action
action은 중앙 저장소에 저장된 state에 “무슨” 동작을 할 것이지 적어놓는 객체입니다. action에는 type이 필수로 필요하다.
//action types
const ADD_TODO = 'ADD_TODO'중앙 저장소에 저장된 state를 변경하기 위해서는 “add, update, delete”와 같은 동작의 type이 필요하고 “add” 의 경우에는 어떤 것을 추가해줄지도 파라미터도 필요하기 때문에 Action을 작성하면 아래와 같이 작성할 수 있다. text는 제가 넘겨주는 데이터이다. 무조건 text가 아니다.
{
type: ADD_TODO,
text: 'Build my first Redux app'
}//actionTypes에 type들을 정의해놓고 import 해서 사용
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'Dispatch
Dispatch는 위에서 Action Creater로 return 해준 Action을 파라메터로 받아서 store의 reducer에게 넘겨주는 역할을 해주는 열차라고 생각하면 편하다.
//addTodo를 담고 reducer로 향하는 dispatch열차
dispatch(addTodo(text))Reducer
상태를 변화시키는 로직을 정의하는 함수
function todoApp(state = initialState, action) {
return state
}combineReducers
우리가 프로젝트르 만들다보면 글로벌 state로 User의 정보도 담고 싶고, todo의 정보 등등,,,, 많은 정보를 담고 싶어진다. 그렇다면 여러개의 reducer가 필요하게 될 것입니다. 그럴 때 사용하는 것이 combineReducers이다.
const todoApp = combineReducers({
user,
todos
})원칙
리덕스를 사용하는 어플리케이션엔 하나의 스토어만이 존재해야 한다.
상태를 직접 변경할 수 없다.
리듀서는 순수 함수로 작성되어야 한다.
