2021_05_18

TIL - Cmarket Redux

1. Cmarket Redux

저번시간에 공부했던 redux를 이용해서 market 페이지의 기능을 구현하는 시간이었다.

Cmarket의 전체 구조는 다음과 같고 내가 Redux를 이용해서 구현한 기능은 ItemListContainer, ShoppingCart이다.

두 컴포넌트에서 존재하는 state는 두 가지이다.

1. 전체 아이템 목록(items)
2. 장바구니 목록(cartItems)

상태 관리는 store에 담겨있는 리듀서에서 이루어진다.

(1) action 정의하기
장바구니에 추가, 삭제 등 action에 따라 type과 payload를 다르게 하여 지정하였다.

export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId
    }
  }
}

(2) action 전달하기
dispatch 함수를 호출하여 아이템 추가, 삭제 등 정의한 action을 store에 전달한다.

const dispatch = useDispatch();
dispatch(addToCart(item.id))

(3) 새로운 state 생성하기
store에 reducer를 생성하고, reducer에서는 각각 action에 따라 새로운 state를 생성한다.

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

createStore를 이용해서 새로운 저장소를 생성한다. 인자로는 reducer를 넣는다.

const itemReducer(state=initialState, action) => {
  switch(action.type) { //type에 따라서 분기한다.
   case ADD_TO_CART:
      return Object.assign({}, state, { //immutability
        cartItems: [...state.cartItems, action.payload]
      })
    case ~~~
      ~~~~~
      ~~~~~~~~~ 
  }

reducer 함수를 작성할 때는 immutability(불변성)을 지켜주어야 한다.
react에서 state를 업데이트할 때 this.setState를 이용해서 업데이트를 했던 것과 같은 이유이다.

reducer에서 새로운 state를 생성하면 변화된 부분을 감지하여 새롭게 UI를 렌더링한다.

(4) state에 접근하기
store에 저장되어있는 state에 접근하기 위해서는 useSelector를 사용해야한다.

 const state = useSelector(state => state.itemReducer);

useSelector의 전달인자로는 콜백 함수를 받으며 콜백함수의 전달인자로는 state 값이 들어간다.




이번시간에는 리덕스를 이용해서 Cmarket을 구현해보았다.
다음시간에는 데이터베이스 mysql에 대해 공부한다!
오늘은 여기까지!!