코드스테이츠 소프트웨어 엔지니어링 부트캠프 63

Cmarket redux 스프린트 복습을 하다가 object.assign이 헷갈려서 다시 정리하여 게시하였다.

https://wnsdufdl.tistory.com/116

JS, Object.assign

 

object.assign이 필요했던 부분은 redux스프린트에서 reducer를 설정하는 부분이다.

const itemReducer = (state = initialState, action) => {

  switch (action.type) {
    case ADD_TO_CART:
      //TODO
      return Object.assign({},state,{
        cartItems : [...state.cartItems,action.payload]
      })
      defalut : return state

action객체의 type이 ADD_TO_CART일 때 반환값을 설정하는 것인데,

Object.assign()이 기억이 나지 않아 헷갈렸다. 맨 처음 할때는 test를 통과하는것이 우선었기에 빠르게 넘어갔지만

오늘은 천천히 뜯어보는 식으로 살펴보았다.

 

Object.assign(target,a,b,) 식으로 본다면 a에 b를 덮은 객체를 target에 덮어서 target을 반환하고 target은 변형된다.

Object.assign()예시

Object.assign(target,a,b,..)

a객체에 b를 덮고 그것을 target에 덮는다.

a={name:"june",age:23,gender:"male"}

b={name:"july",age:23}

c={country:"korea"}

console.log(Object.assign(c,a,b))
//{country: 'korea', name: 'july', age: 23, gender: 'male'}


console.log(c)
//{country: 'korea', name: 'july', age: 23, gender: 'male'}
//c 가 변형되었다.

 

때문에 어떤 객체도 변형시키지 않으려면 target에 빈객체를 넣어주어야 한다.

 

스프린트 부분을 다시 살펴보자면

1. 기존 state에 있는 cartItem부분을 변형시키고 (state원본은 변형되지 않음)

2. 그 값을 빈객체에 넣어서 리턴한다. 

const itemReducer = (state = initialState, action) => {

  switch (action.type) {
    case ADD_TO_CART:
      //TODO
      return Object.assign({},state,{
        cartItems : [...state.cartItems,action.payload]
      })
      defalut : return state