redux
redux는 state를 관리해주는 라이브러리!!
store는 전역 관리소( 중앙화된 중앙 관리소 ) 이며 store 안은 전역 상태이다
redux 도식화(루틴)
출처: https://ayushv.medium.com/
- 루틴
1.event가 발생한다. (발생 전까지 초기State값 표시)
2.event Handler함수를 돌린다.
3.함수 안에서State에 저장될 부분이Reducer를 거치기 위해Dispatch를 사용한다.
4.Dispatch를 통해action-creater를 호출한다.
5.action-creater가payload에 들어갈 값을 가지고 간다.
6.action-creater가Store를 통해 해당Reducer에서event실행 전State값과 함께action한다.
7.Reducer를 거친 값이State에 저장된다.
8.저장된State값이 UI에 표시된다.
redux 사용 문법(함수,훅)
reducer, action, dispatch, useSelector (ft.덕스 패턴, payload)
reducer
reducer는 쉽게 얘기하자면 setState이다.
state의 초기값(저장된 값)과 데이터 편집방법이 들어간 함수이다.
modules폴더의 js의 파일안에 작성되며, function '이름'(state = 초기값, action) 형태로 작성된다. 이름은 헷갈리지 않게 js파일 이름과 동일하게 가져간다.
한마디로 정리하자면,
reducer는 가장 상위의(최종으로 저장 될)State를 위해 사용되는setState들의 집합(함수)이다.
action
action은 action-value와 action-creater를 통해 reducer함수에 들어간다.
action-value는 내가 사용할 action의 key값이라고 생각하면 되고, action-creater에 type으로 들어가게 된다.
action은reducer와 같은js에 파일에 들어가며, modules 덕스패턴을 따른다.
- 덕스 패턴 (리덕스 모듈)
액션 타입(Actions), 액션 생성 함수(Action Creators), 리듀서(Reducer)가 모두 들어있는 자바스크립트 파일을 의미
아래의 작성 순서를 지켜야함! (개발자들의 약속)// ---action value--- // ---action creater--- // ---module 초기값--- // ---reducer---
dispatch
dispatch는 action을 하기위해 action-creater의 payload값을 넣어주는 용도로 사용한다.
"reducer는 setState들의 집합" 이라고 했는데 setState가 사용될 부분에 dispatch가 사용된다. 그래서,
dispatch를 선언한 곳에 action-creater를 불러오며, 해당 장소에서 payload값을 선언하고 할당한다. 할당 받은 payload값을 가지고 reducer에 들어가 action하는 것이다.
한마디로,
dispatch는action-creater를 호출하는 용도이다.
- payload
payload는action-value에 따라 필요한action의state값을 가진다.
useSelector
useSelector는 store의 상태값(state)을 가져오는 역할이다.
useSelector(state => state.모듈명) 형식으로 상태값을 반환하며,
useSelector(state => state.모듈명.요소명) 이런식으로 요소를 바로 가져올 수도 있다.
이전 값에 추가하거나 수정하는 역할은 reducer에서 하므로 useSelector는 state안의 요소들의 value를 비교, 확인할 때 많이 사용한다.
항상 새로운 것을 배울 때는 용어와 역할이 익숙하지 않아서 적응하기 힘들었던 것 같다. 리덕스를 익힐때도 처음은 굉장히 어렵게 느껴졌지만, 반복해서 익히다보니 점차 눈에 익고 외우기 급급했던 것들이 어떤 역할을 하는지 하나씩 파악이 됐다.
내일은 이번에 배운 리덕스로 내가 만들었던 todolist(완성된 코드)를 리덕스화 해볼 생각이다.
처음부터 만드는 것보다 오히려 만들어진걸 바꾸는게 이해하는 측면에서 더 도움이 될 것 같다.
