Redux 이해해보기 1 - 용어 정리

이말감·2022년 5월 20일
0

Redux

목록 보기
4/4

리덕스 툴킷이 이해가 안되기 때문에 먼저 리덕스에 대해 공부해보자!!!!

Redux

Redux는 뭐죠

  • 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리

라고 글을 보면 이해가 될랑말랑하다 .. 웅..
하지만 이 영상을 보고 움 글쿤 하고 이해할 수 있었다.

내가 이해한 리덕스는 react에서 사용하는 useState처럼 상태를 관리해준다.
근데 프로젝트를 진행하다보면 컴포넌트가 쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고쌓이고.. 한다.
이때 형제 컴포넌트끼리 prop을 공유할 때 무조건 부모 컴포넌트를 지나야 하는데.. 그 사이에 만약 오백 개의 컴포넌트가 있다면..? 난 운다.
하지만? 리덕스는? 할 수 있다.

리덕스 : 내가해냄

Redux 용어 숙지하기

예시

교수 - 조교 - 과대 - 나

위와 같은 순서로 전달이 진행된다고 하자. (걍..컴포넌트라고 그냥 이해 하자)
만약 세상에 인터넷도 없고 오직 입에서 입으로 전달을 해야하는 상황이라면
교수님이 과제를 낼 때 조교에게 말하고, 조교가 과대에게 말하고, 과대가 나한테 전달해야 한다.
휴 벌써 힘들어
그리고 과제를 다했다면 나는 과대에게 제출하고, 과대는 조교에게, 조교가 교수님한테 전달을 해야만? 난 과제 제출 인정이 되는 것이다.

글만 읽어도 너무너무너무너무너무너무 복잡하다.

하지만 리덕스를 쓴다면?

교수님이 lms에 '과제 내일까지 해오세요' 라고 올리면 나는 조교나 과대에게 따로 전달받지 않고 과제를 받을 수 있다.
그리고 과제 제출도 과대, 조교를 거치지 않고 lms에 등록만 하면 된다.

위 과정으로 리덕스를 이해했다.!

학교Redux
lmsstore.js
교수, 조교, 과대, 나컴포넌트 1, 2, 3, 4

먼저 액션이 아래와 같다고 하자.

'과제 있음'과 '과제 없음', '과제 끝냄'

store.js에는 현재 state와 변화를 일으키는 함수인 reducer가 저장되어 있다.

  • store.js
현재 state : 'no'
reducer :
  - '과제 없음'
    - return 'no'
  - '과제 있음'
    - return 'yes'
  - '과제 끝냄'
    - return 'free'

근데 교수님이 갑자기 과제를 내셨다.
그럼 dispatch가 냅다 '과제 있음' 액션을 발생시킨다.
이렇게 호출을 하면 storereducer 함수를 실행시켜서 해당 액션(과제 있음)을 처리하는 로직이 있는지 본다.
위에 작성한대로 reducer에는 과제 있음을 처리하는 로직이 있다.
그래서 이 액션을 참고하면 return 'yes' 이므로 현재 상태가 바뀐다.

현재 상태가 'yes'가 되면 난 과제를 시작한다..🥺
그리고 과제를 끝내면 교수님과 같은 방식으로 상태가 바뀔 것이다.

  1. 과제 제출함
  2. dispatch'과제 끝냄' 액션 발생
  3. storereducer 함수 실행 시킴
  4. '과제 끝냄' 로직 있으므로 액션 참고해서 바꾸기
  5. 현재 상태 'free' 로 바뀜

그럼 또 과제 기한이 끝나면

  1. 과제 기한 끝냄
  2. dispatch'과제 없음' 액션 발생
  3. storereducer 함수 실행 시킴
  4. '과제 없음' 로직 있으므로 액션 참고해서 바꾸기
  5. 현재 상태 'no'로 바뀜

아닐수도있다내가무지할지도내가바보였을지도...

profile
전 척척학사지만 말하는 감자에요

0개의 댓글