2/27 일일정리 Redux 실습

저번주에 배운 내용을 바탕으로 props drilling으로 구성되어 있던 Cmarket 을 Redux를 사용하여 전역상태를 관리하도록 Refactoring 해보았다.

Cmarket

Redux를 사용한 상태관리의 큰 흐름을 보면 다음과 같다.

⓵ 변경할 상태에 대한 정보가 담겨있는 Action 객체를 생성한다.

 

⓶ Dispatch라는 함수를 통해 Action객체를 Reducer라는 함수로 운반한다.

 

⓷ Reducer함수에 의해 상태가 변경이 되고 그 상태는 Store에 저장된다.

 

⓸ 상태가 바뀌면 React가 상태변경을 감지하여 해당 컴포넌트를 리렌더링한다.

 

Action 객체 생성

가장 먼저 상태정보를 담고있는 Action객체를 만들 함수를 작성한다. 우리에게 필요한 Action 객체는 장바구니 담기, 수량변경, 아이템 삭제 이다.

각각의 함수에는 필요한 정보를 저장하는데 아이템 삭제 Action 객체에는 item id만 있으면되고, 수량변경 Action 객체에는 item id와 수량정보가 필요하다. 장바구니 담기 Action 객체에는 item id와 함께 수량을 1로 설정해주면 된다.

각각의 Action 객체에 type으로 문자열을 지정해주고 Reducer 함수로 이동하면 각 type에 따른 함수를 실행시키도록 한다.

 

Dispatch

useDispatch Hook을 통해 dispatch 함수를 생성하고

dispatch 함수에 인자로 Action 객체를 전달하면 된다. 각각의 버튼(장바구니 담기, 수량 변경, 아이템 삭제)에 onclick 이벤트 핸들러 내부에 dispatch 함수에 인자로 위에서 만든 Action객체를 생성하는 함수를 전달하여 dispatch 함수를 실행시키면 된다.

위 코드는 장바구니 담기의 onclick 이벤트 핸들러이다.

조건문으로 장바구니에 아이템이 없는 경우에는 Action 객체 전달과 함께 장바구니에 아이템을 추가하면서 notify라는 이미 만들어진 함수를 전달하여 문구를 띄워준다.

장바구니에 아이템이 있으면 '이미 추가된 상품입니다.' 라는 문구만 띄워준다.

 

수량 변경과 아이템 삭제 버튼에도 onclick 이벤트 핸들러 안에 dispatch에 Action객체를 만들고 담아서 전달한다.

 

Reducer 함수

Reducer함수는 Store공간(상태를 저장해두는 곳) 내부에 등록되어 있는 함수로 상태를 변경해주는 함수이다.

state에는 아이템 정보와 장바구니 정보가 저장되어 있다.

Reducer 함수를 통하여 처음 상태를 Action 객체에 담긴 내용으로 바꾸어 주면 된다.

우리 Reducer 함수는 세가지 타입의 Action 객체를 받는다.

 

ADD_TO_CART 

먼저 ADD_TO_CART 타입은 장바구니 담기 버튼을 클릭하면 전달되는 Action 객체로 현재 장바구니 상태에 전달된 Action 객체 내부의 item id를 가지는 객체를 추가해주면 된다.

스프레드 문법으로 기존 state를 복사한 후 cartItems 배열에는 기존 요소들을 넣고 전달된 action객체의 정보를 추가하면 된다.

 

REMOVE_FROM_CART

REMOVE_FROM_CART 타입은 현재 상태에서 전달된 item id를 가지는 요소를 삭제하면 된다.

state를 복사한 후 cartItem 요소는 filter 메서드를 사용하여 전달된 item id가 아닌 요소들만 필터링 해주면 된다.

 

SET_QUANTITY

SET_QUANTITY 타입은 전달된 item id 의 수량(quantity)을 input 박스에 있는 값으로 변경해주면 된다.

수량 버튼을 누른 item의 id 를 찾아서(findIndex) id값이 일치하는 cartItems의 요소를 찾은 후 그 요소의 quantity를 전달된 action 객체의 quantity 값으로 변경해주면 된다.

 

리렌더링

Reducer 함수를 거쳐서 state가 변경되면 해당 state를 사용하는 컴포넌트가 리렌더링 되면서 화면에 표시된다.

 

 

참고사항

* store에서 state를 꺼내올 때는 useSelector Hook을 사용한다.