리덕스 툴킷이 이해가 안되기 때문에 먼저 리덕스에 대해 공부해보자!!!!
라고 글을 보면 이해가 될랑말랑하다 .. 웅..
하지만 이 영상을 보고 움 글쿤 하고 이해할 수 있었다.
내가 이해한 리덕스는 react에서 사용하는 useState
처럼 상태를 관리해준다.
근데 프로젝트를 진행하다보면 컴포넌트가 쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고.. 한다.
이때 형제 컴포넌트끼리 prop을 공유할 때 무조건 부모 컴포넌트를 지나야 하는데.. 그 사이에 만약 오백 개의 컴포넌트가 있다면..? 난 운다.
하지만? 리덕스는? 할 수 있다.
리덕스 : 내가해냄
교수 - 조교 - 과대 - 나
위와 같은 순서로 전달이 진행된다고 하자. (걍..컴포넌트라고 그냥 이해 하자)
만약 세상에 인터넷도 없고 오직 입에서 입으로 전달을 해야하는 상황이라면
교수님이 과제를 낼 때 조교에게 말하고, 조교가 과대에게 말하고, 과대가 나한테 전달해야 한다.
휴 벌써 힘들어
그리고 과제를 다했다면 나는 과대에게 제출하고, 과대는 조교에게, 조교가 교수님한테 전달을 해야만? 난 과제 제출 인정이 되는 것이다.
글만 읽어도 너무너무너무너무너무너무 복잡하다.
하지만 리덕스를 쓴다면?
교수님이 lms에 '과제 내일까지 해오세요' 라고 올리면 나는 조교나 과대에게 따로 전달받지 않고 과제를 받을 수 있다.
그리고 과제 제출도 과대, 조교를 거치지 않고 lms에 등록만 하면 된다.
위 과정으로 리덕스를 이해했다.!
학교 | Redux |
---|---|
lms | store.js |
교수, 조교, 과대, 나 | 컴포넌트 1, 2, 3, 4 |
먼저 액션이 아래와 같다고 하자.
'과제 있음'과 '과제 없음', '과제 끝냄'
store.js
에는 현재 state
와 변화를 일으키는 함수인 reducer
가 저장되어 있다.
현재 state : 'no'
reducer :
- '과제 없음'
- return 'no'
- '과제 있음'
- return 'yes'
- '과제 끝냄'
- return 'free'
근데 교수님이 갑자기 과제를 내셨다.
그럼 dispatch
가 냅다 '과제 있음'
액션을 발생시킨다.
이렇게 호출을 하면 store
가 reducer
함수를 실행시켜서 해당 액션(과제 있음
)을 처리하는 로직이 있는지 본다.
위에 작성한대로 reducer
에는 과제 있음
을 처리하는 로직이 있다.
그래서 이 액션을 참고하면 return 'yes'
이므로 현재 상태가 바뀐다.
현재 상태가 'yes'가 되면 난 과제를 시작한다..🥺
그리고 과제를 끝내면 교수님과 같은 방식으로 상태가 바뀔 것이다.
- 과제 제출함
dispatch
가'과제 끝냄' 액션
발생store
가reducer 함수
실행 시킴'과제 끝냄'
로직 있으므로 액션 참고해서 바꾸기- 현재 상태
'free'
로 바뀜
그럼 또 과제 기한이 끝나면
- 과제 기한 끝냄
dispatch
가'과제 없음' 액션
발생store
가reducer 함수
실행 시킴'과제 없음'
로직 있으므로 액션 참고해서 바꾸기- 현재 상태
'no'
로 바뀜
아닐수도있다내가무지할지도내가바보였을지도...