Redux 1탄 - Redux의 흐름

포스팅이 약 3주? 정도 없었는데 이 상노무 Redux를 조금이라도 더 정확히 파악하고 포스팅 하고 싶었기 때문입니다!
(사실상 redux만 잡고 있었음)

 

이 친구는 저번 글에 썼던  Context API 와 비슷한 능력을 가진 친구입니다.

우리를 props 지옥에서 벗어나게 해주는친구.

props 연결고리 대신 별도의 공간에서 state를 만드는 느낌인데 자세한건 아래에 설명 하겠어요~

 

꽤 많은 사람들이 Redux를 쓴다고 한다. 점유율이 높은편

세상은 앞으로도 더 좋아지면서 이 Redux마저도 간단하게 만들 전역상태관리 도구가 나오겠지만
여튼 세상은 아직 Redux를 쓴다고 합디다~

( Context API 와 비교했을때 장점이 많이 있더라)

핵 코린이 시점에서 생각했을때 좋은점은

state변경 로직을 ( useState 로 따지면 Set어쩌구 같은거 있자나여) 관리하기 쉽다 ? 

and 직관적이고 뭔가 나중에 수정이나 변경사항이 생겼을 때 찾기 쉬울것같다? 

이상 코린이적인 생각이었구요..

 

 

사용법은 꽤나 복잡하니 잘 따라오세요~

---

Redux의 기본적인 사용 흐름을 써보자면

 

Store 라는 창고에  State 를 정의하고

↓

Component 에서 subscribe 해서 땡겨쓰는데 여기서

↓

Dispatch  (  Store 안에 State 바꿔주세요 ! ) 요청을 하면

↓

action ( 눼눼~ 바꿔드릴게요 어떻게요 ? ) 이 발동되고

↓

reducer ( 어떻게 바꿀지 로직이 담겨있는 창고  ) 에 정의된 로직에 따라

↓

Store의 State를 변경시키고 

↓

State를 땡겨 쓴 Component가 변경된다.

 

요종도~ 

---

위의 설명을 봤다면 어느정도 느낌은 왔을거에요~  

는 두립이구요~

당연히 이해 안될겁니댜. 나 역시도 과부화가 걸려버렸지 모얌~

하지만 천천히 가보자. 

 

위에 설명에서 처음 봤을 친구들에 대한 설명부터 ... 최대한 쉽게... 하자면...

 

 

Store

→ state를 앞으로 여기다 보관할거다. 그냥  보관창고다.

 

Component

→ 잘 알쥬 ?  나중에 action을 여 안에서 발생시킬거에유

 

subscribe

→ subscribe? 구독 ? 좋아요 ? 알림설정까쥐~ 
뭔말인가 싶겠지만 그냥 진짜 말그대로 구독 꾸욱 누른거라고 생각하면 편하다.

State를 Component에서 불러다 쓰기위해서 store한테 구독 꾸욱 누른거임

나중에 다 말해주께요~

 

dispatch

→ 이거는 스토어가 제공하는 함수인데 밑에 나올 action을 발생시키는 함수라고 생각하시오

 

action

→ 이건 쫌 설명이 길어지는데 나중에 더 할게요 그냥 대충 의미 파악만 ㄱㄱ

 

말 그대로 어떤 action을 취하고 싶다 라는 뜻인디

state를 이러쿵 저러쿵 바꾸고 싶다~~  라고 말하려고  쓰는 친구.

아래처럼 요로쿵 생겼는디야~ 여기서 type으로 시작하는 ( key + value ) 는 필수임ㅇㅇ

action은 객체형태에유.

이게 뭔말이냐면 ~~

Q. 액션 형태(type) 가 뭐에요 ? 

A. 데이터 추가(ADD_DATA)  해주세요! 입니다.

 

다시말해 액션타입은 데이터추가입니다~  라는 뜻.

type에 해당하는 value는 목적에 맞춰서 자유롭게 작성하면됩니다.  * 보통 대문자와 _ 를 사용해서 구분하여 작성 *
ex) 데이터 추가하기--> ADD_DATA , 데이터 삭제하기---> DELETE_DATA

 

근데 요놈은  action 생성함수 라는걸 따로 만들어서 사용해유~

(그래야 나중에 Component에서 action발생할때 개편함 ㅇㅇ 차차 알게될겁니다.)

요러케 생겼슈

위에 코드처럼 함수를 하나 만드는건데 갑자기 parameter도 받고  payload : data 이런놈이 생겼쥬 ?

이것도 나중에 설명해드림..

중요한건 아까말한 action의 type이 포함되어 있어야 한다는 것 

action 생성함수들은 나중에 다른 파일에서 불러와서 사용할거라서 export 해준모습. 

응 ~ 나중에 설명~

 

 

Reducer

→ 이 친구는 state 변경을 담당하는? 변경함수라고 생각하면 될듯합니다.

parameter 2개를 받는데 1. State 2. action 입니다.

state는 말그대로 state임 아무것도 수정하지 않았을때의 초기State 말하는 것임

( 뭐 0 이나 true나 false나 object 자료형 등등이겠쥬?)

 

그다음 받은 action의 type에 따라 짜여진 로직에 맞춰서 state를 변경시켜주는 친구 ~ 

 

 

이야 ~ 대충 의미만 집고 넘어가려고 한건데 많다.

아니 ? 많지않아 해야쥐 ~  싫으면 props 난사 하던가 ~~~ 

이어지는 2탄에서는 진짜 본격적으로 Redux를 어떻게 사용하는지 포스팅 하도록 하겠다.

 

끝.