Redux?
Redux는 전역 상태 관리 라이브러리이다.
Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다.
Redux를 사용하는 이유
1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다.
- 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용
- state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다.
2. 상태(state) 관리하기 용이하다.
- 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌트에서 에러를 찾아야한다. 하지만, redux를 사용할 경우 state를 보관하는 장소에서 수정 방법까지 지정해두고 컴포넌트에서 수정방법을 요청(요청만 가능)하면 state가 변한다.
- 그렇기 때문에 버그가 발생할 경우 state보관 장소에서 찾아서 해결할 수 있다.
Redux의 구조
Action
- state를 바꾸는 방식을 설정한다.
- type을 지정하여 Action 객체가 어떤 동작을 하는지 역항르 명시해 주어야합니다.
- 대문자와 Snake Case로 작성합니다.
- 필요에 따라 payload를 작성해 구체적인 값을 전달합니다.
Dispatch
- Reducer로 Action을 전달해주는 함수입니다.
- Action에 동작을 요청하는 것으로 Action 객체를 파라미터로 받는다.
Reducer
- Dispatch에게서 전달받은 Action 객체로 변화를 일으키는 함수로 Action 객체의 type에 따라 상태를 변경하는 함수입니다.
- Reducer는 외부 요인으로 인해 값이 변경되는일이 없는 순수함수여야 합니다.
Store
- 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.
- Redux의 상태가 저장되어 있는 공간입니다.
Redux의 동작 과정
Action → Dispatch → Reducer → Store
- Action을 정의한다.
- Dispatcher에서 Aciton객체를 파라미터로 받아 Reducer 함수로 전달한다.
- Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소(Store)의 상태를 변경한다.
참고자료
'Coding > 전역 상태 관리 라이브러리' 카테고리의 다른 글
| [Redux] Redux-toolkit (0) | 2022.11.21 |
|---|---|
| [Redux]React-redux 사용하기 (0) | 2022.10.25 |