Redux 5탄 - State값 사용,수정하기

지난 4탄에서 우리는

Store의 state를 모든 Component에서 접근 가능한 상태로 만들어 두었습니다.

그러면 접근을 해봐야겠쥬~?

 

이번시간에는 본격적으로 State값을 사용하고 수정 해보겠습니다잇 !!

 

언제나 그랬듯이 본론을 바로 들어갈 수 없슴다ㅎ

개념을 잡고 읽어야 더 이해하기 쉬우니까유~

 

---

 

1. Component 분리하기 

저도 Redux를 배우고 써보면서 알게된 개념입니다.

 

우리는 이제

우리가 쓰던 Component를 2개로 분리할겁니다!!!

 

프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트로 말이쥬~~

 

말은 거창한데 사실 별거없더이다.

 

말 그대로~

 

 

프리젠테이셔널 component

→ 보여지는 것 (UI) 들을 담은 component 이다

 

 

컨테이너 component

→ 이 안에서 State값을 불러오고 수정을 위한 액션을 dispatch 한다.

    또 프리젠테이셔널 component를 불러와서 사용한다. ( 상위 Component )

 

 

이 친구들에 대해 조금 더 세부적으로 알아보겠슴다~

 

 

---

 

2. 컨테이너 component 만들기!

 

좀 더 나은 이해를 위해

컨테이너 component부터 만들어 봅시다.

 

src 폴더에 containers 폴더를 만들고 CartContainer.js 를 만들었슴다.

저는 이게 더 깔끔허이 좋아서여~

( Components 폴더 → 프리젠테이셔널 component 보관)

( containers 폴더 →  컨테이너 component 보관)

 

이렇게 따로 폴더를 만들어 구분해도 되고 Components 폴더에 다 때려박아도 됩니다. 자유에용~

 

 

 

이제 코드를 살펴보져~

상단 코드를 위에서부터 아래로 차근히 봐봅시다.

useSelector 와 useDispatch 를 react-redux 로 부터 땡겨왔슴다.

이 친구들이 가장 중요한 친구들입니다.

 

컨테이너 Component는 상위에서 프리젠테이셔널 Component를 땡겨쓴다고 했슴다. 

그래서 프레젠테이셔널 Component 인 Cart.js 도 땡겨왔군요. ( 이따가 만들겁니다. )

 

마지막으로 Redux 모듈파일에 만들었던 action 생성함수 중 3개도 땡겨왔슴다!

( Cart Component 에서는 4개중 3개만 쓸거라서여 ~ )

 

 

 

---

2-1 useSelector

 

이제 Component 부분 코드도 봐봅시다.

useSelector 라는 hook이 등장했습니다.

 

useSelector를 사용해서

"Store에 저장되어 있는 State를 사용하겠습니다" 라고

구독(subscribe) 하는 겁니다.

 

 

useSelector는 이런 형식으로 사용하면 됩니다.

 상수부분은 자유롭게 작명합니다. 저는 편의상 통일했슴다.

 

혹시나~

State통째로는 필요없고 그 속에 있는 값이 필요한데여,,, 하신다면~

 콜백함수의 "인자"명은 자유이지만, 의미상 store OR state 라고 쓰는게 좋아보이네요 그이유는 밑에서 나옵니다.

당연히 이런식으로 접근할 수 있습니다.

 

 

이렇게 접근이 되는 이유는 ~~

useSelector는 인자로 콜백함수를 받고

그 콜백함수는 인자로 state가 전부 포함된 객체,

 

즉 Store의 State객체 를 받습니다.

 

 

우리는 Store를 생성했던 src 폴더의 index.js 로 가서

콘솔창에 store.getState() 를 찍어봄으로써

Store의 State객체 를 확인할 수 있슴다.

store.getState() 를  콘솔창에 찍어봅시다.

 

결과값 입니다.

Store에 담긴 State가

객체형으로 잘 찍혀 나옵니다.

 

 

결론!

우리는 위 코드로 구독(subscribe)을 성공했슴다!

 

다른 모든 Component 에서도 이처럼 구독을 하기만 한다면

해당 State의 값을 모든 Component에서 사용할 수 있습니다!!

 

 

---

2-2 useDispatch

 

다음 코드를 봐봅시다.

useDispatch 는 

Store의 기능인 dispatch를 함수에서 사용 가능하게 해주는 hook 입니다.

 

useDispatch를 사용해서 각 액션함수를 dispatch하는 또 다른 함수를 미리 만들어 둔 모습임다.

 

 

여태까지의 과정을 보면

 

 

1. 액션 타입을 미리 만들어 둠으로써

→ 액션 생성함수에 넣을 형식을 매번 직접 타이핑할 필요가 없어졌고

 

2. 액션 생성함수를 미리 만들어 둠으로써

→ dispatch에 필요한 형식을 매번 직접 타이핑할 필요가 없어졌습니다.

 

마지막으로!

 

3. 액션 생성함수에 dispatch를 씌워둔 또 다른 함수를 미리 만들어 둠으로써 

→ Component 에서 위의 함수만 입력하면 한번에 모든 과정이 끝나겟네요~!!

---

거의 다 왔습니다.
HTML 부분을 봐봅시다

곧 만들 프리젠테이셔널 Component를 return하고  

 

아까 구독누르고 땡겨온 State의 값, 액션 dispatch 함수 3개 까지 

props를 이용해서 Cart Component 로 전달해준 모습입니다~

 

마지막으로 완성한 컨테이너 Component를 export default 해서

src폴더의 app.js 에서 import 해준 뒤

원하는 자리에 생성해주면 됩니다이~~~

 

 

 

이제 프리젠테이셔널 Component 를 만들어 봅시다잇 !

---

3. 프리젠테이셔널 component 만들기!

 

저의 경우에는 useState를 활용해서 만들어 가고 있던  Component인

Cart.js를 재활용 했씀다.

 

대부분 저와 같은 흐름일 겁니다잇!

 

 

 

먼저 컨테이너 Component로 부터 props로 데이터를 받아와야 합니다.

구조분해 할당문법 ( destructuring )을 사용해서 그대로 다 받았습니다.

 

 

이제 받아온 값을 사용해 봅시다.

저는 CartQuan으로 .map()을 돌리고

버튼 click시 실행할 행동으로 액션Dispatch 함수를 넣었습니다.

 

이로써

+ 버튼과 - 버튼 , 삭제 버튼을 각각 눌렀을 때

각 액션이 디스패치 되면서 type과 추가데이터가 Reducer로 전달됩니다.

이어서 Reducer함수의 로직에 따라 변경된 State 값을 return하고 

값이 변경됐다면 리랜더링이 발생하면서

Component에서 사용한 State 값을 업데이트 해줍니다 !

 

---

 

 

 

 

끝! 끝! 끝!

지금까지 총 5탄에 걸쳐 Redux의 기본사용법과 원리를 알아봤슴다.

 

뒤지게 길고 뒤지게 이해하기 어려웠지만 포스팅을 하는 과정중에 복습까지 야무지게 하면서 

기본 개념적인 부분을 다시 적립했슴다.

Redux는 프로젝트의 규모가 커질수록 그 진가를 알게된다고 합니다.

props 한 두번으로 해결되는 사이즈의 프로젝트에서 Redux를 쓴다는건 당연히 사서 고생하는 느낌이겠죠.

 

또 Redux는 연계되는 다른 라이브러리들과 함께 이러쿵 저러쿵하는 할 일이 많다고 합니다.

그런 Redux 심화 과정들을 당장에 포스팅 하는 일은 없을겁니다.

당장 제가 사용해보지 않을 뿐더러  지금 제 머리가 뜨겁거든요^^

 

앞으로 배워야 할, 제가 공부할 때에는 구닥다리 기술이 되어버렸을 수도 있는,
그런 많은 기술들을 이미 다 공부했고 습득하신 많은 개발자분들에게 존경을 표합니다.  

 

 

 

 

끝