11주 4일차 - Cmarket Redux 2

11주 4일차 - Cmarket Redux 2

1. 배운 것

• 배열 메소드 콜백함수 축약
• Array.prototype.fill()

2. 내용 정리

2.1 Cmarket Redux 과제 복습

• reducer 함수는 항상 새로운 state를 반환해야 한다. 따라서 초기값이 원시값이면 그냥 복사본을 만들어서 복사본으로 값의 변경을 다루면 되고 객체일 경우 깊은복사한 복사본으로 값의 변경을 다룬다.
• 타입 값 으로 쓸 문자열을 변수화 해두는게 재사용성이 좋다.
• 할당을 안하고 useDispatch로는 사용 불가. 상태도 useState() 해줘야 쓸 수 있는 것처럼 디스패치도 가져와야 한다.

Action

src > actions > index.js : action 객체를 생성하는 함수를 정의한다.

프로퍼티의 key와 value가 이름이 같다면 하나만 써도 된다.

payload로 뭘 보내줘야 할지 고민했는데 그냥 매개변수를 그대로 넣어주면 된다.

// src > actions > index.js

// actions creator functions
export const addToCart = itemId => {
  return {
    type: ADD_TO_CART,
    payload: {
      quantity: 1,
      itemId, // itemId : itemId
    },
  };
};

export const removeFromCart = itemId => {
  return {
    type: REMOVE_FROM_CART,
    payload: {
      itemId, // itemId : itemId
    },
  };
};

export const setQuantity = (itemId, quantity) => {
  return {
    //TODO: setQuantity는 SET_QUANTITY 액션을 생성해야 합
    type: SET_QUANTITY,
    payload: {
      quantity,
      itemId, // itemId : itemId
    },
  };
};

Dispatch

pages 폴더에 있는 두 컴포넌트에서 dispatch 함수를 실행시킨다.

• src > pages > ItemListContainer.js

장바구니 페이지에 추가한 아이템이 들어와야 한다.

// src > pages > ItemListContainer.js > handleClick

const handleClick = item => {
	if (!cartItems.map(el => el.itemId).includes(item.id)) {
//TODO: dispatch 함수를 호출하여 아이템 추가에 대한 액션을 전달하세요.
	  **dispatch(addToCart(item.id));**

    dispatch(notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`));
  } else {
    dispatch(notify('이미 추가된 상품입니다.'));
  }
};

---

• src > pages > ShoppingCart.js

장바구니 페이지에서 장바구니에 담은 아이템 수량을 입력받은 값으로 변경하거나 아이템을 삭제하는 기능을 구현해야 한다.

// src > pages > ShoppingCart.js > handle ~~.

const handleQuantityChange = (quantity, itemId) => {
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    **dispatch(setQuantity(itemId, quantity));**
  };

  const handleDelete = itemId => {
    setCheckedItems(checkedItems.filter(el => el !== itemId));
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    **dispatch(removeFromCart(itemId));**
  };

Reducer

• src > reducers > itemReducer.js

dispatch 함수가 reducer 함수를 호출하고, reducer 함수는 action.type 에 따라 조건 분기하여 변경된 state를 리턴해야 한다.

아이템 추가/삭제, 수량 조절의 변경된 state를 Object.assign을 사용하여 리턴한다.

• findIndex 메서드 : 메서드를 사용한 배열에서 인수로 넣은 판별 함수를 통과한 요소의 인덱스를 반환.

// src > reducers > ItemReducer.js > itemReducer

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload],
      });

    case REMOVE_FROM_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems].filter(
          item => item.itemId !== action.payload.itemId
        ),
      });

    case SET_QUANTITY:
      let idx = state.cartItems.findIndex(
        el => el.itemId === action.payload.itemId
      );
      **state.cartItems[idx].quantity = action.payload.quantity;**

      return Object.assign({}, state, {
        cartItems: state.cartItems,
      });
    default:
      return state;
  }
};

2.2 알고리즘

배열 메서드 콜백함수 내부 축약

이게 정확한 표현인지는 모르겠지만 까먹지 않기 위해 우선 정리한다. 백준 인풋값 정제 시 활용도가 좋아보인다. 인수로 함수를 주면 자동으로 배열 요소들이 콜백함수의 인수로 들어가는 것으로 보인다.

const arr = ['1', '2', '3'];
const numArr = arr.map(Number);

console.log(numArr); // [1, 2, 3]

---

for of 문으로 배열 모든 요소 push 코드 한줄로 하기

for (nextNode of [current * 2, current * 2 + 1]) {
      // for of 문으로 push 한 줄로 2개를 push 함.
      if (nextNode > 7) continue;
      queue.push(nextNode); // Enqueue
    }

Array.prototype.fill()

인수로 넣은 값으로 배열을 채운다.

더 공부할 내용

• 주말: 과제 줌 세션 내용으로 복기
• 주말: 운동 기록 앱 리덕스 파트까지 구현

3. notes

근처에 사는 친한 동기분께서 번아웃이 오셔서 같이 한잔 했다. 또 근처에 사셔서 한번 뵙고 싶었던 분이었는데 공부가 어려워서가 아닌 다른 외부 상황때문에 하차하게 되었단 소식을 듣고 너무 안타깝고 마음이 아팠다. 내 뜻대로 하고 싶어도 도저히 어찌할 수 없는 상황들을 살면서 마주하게 될 때 위기가 기회가 될 지 타격이 될지 물론 자기 몫이지만 참 어렵다. 다들 행복했으면 좋겠는데.