Javascript 객체 복제 Object.assign 요약과 React 적용

API에서 날려주는 데이터를 UI에 더 잘 뿌려주기 위해 꼭 알아야 할 부분입니다.

이 글은 자세한 개념을 다루지 않고, 제가 기억하고 싶은 부분 중심으로 작성했습니다.

---

🥑 구조

Object.assign(target, ...sources)

Object.assign({초기값, 객체들}) 

뒤에 있는 객체들이 초기값 부분과 합쳐집니다.

 

❓ 왜 쓰는가

우리가 객체를 복제하고 싶을 때, 쉽게 이용할 수 있는 방법은 또 다른 변수에 객체를 담는 것입니다.

const user = {
	name: "gaegul",
    gender: "female"
}

const newUser = user; // newUser에 user를 복제

console.log(newUser.name) // gaegul

newUser은 user의 내용을 똑같이 담고 있습니다. 

 

하지만 이 방법은 문제점이 있습니다.

newUser에서 뭔가를 바꾸면, user에도 반영이 되는 것입니다.

newUser.age = 99

console.log(newUser)

// ----- Output -----
// newUser: {name: 'gaegul', gender: 'female', age: 99}
// user: {name: 'gaegul', gender: 'female', age: 99}

저는 newUser에만 새로운 값을 추가했는데, user에도 추가되었습니다.

하나의 객체에 두 변수가 접근하면서,

원래 user 데이터가 지켜지지 않습니다.

 

✅ 객체를 복제하는 방법 

그래서 Object.assign을 이용합니다. 

const newUser = Object.assign({}, user); // {}는 초기값 

newUser.name = 'newGaegul'

// ---- Output -----
// newUser: {name: 'newGaegul', gender: 'female', age: 99}
// user: {name: 'gaegul', gender: 'female', age: 99}

 

적용 예시

React action이랑 reducer에서 매일 복붙해서 사용중입니다.

// Action
export const setNewRequest = (data) => (dispatch, getState) => {
  const store = getState();

  dispatch({
    type: SET_NEW_REQUEST,
    payload: Object.assign({}, store.data, data)
  })
}


// Reducer
const initialState = {
	newRequestData: []
}

export default function RequestReducer(state = initialState, action) {
  switch(action.type) {

    case SET_NEW_REQUEST:
      return Object.assign({}, state, {newRequestData: action.payload}); 
      
    default: return state;
  }
}

 

📚 참조

코딩앙마의 자바스크립트 중급 강좌