Object.entries()를 이용해 객체를 배열로

Firebase Realtime Databse는 모든 자료를 거대한 Json으로 저장한다.
key value의 값으로 모든 구조가 이루어져 있다 보니,
react에서 손쉽게 사용하려면 객체를 배열로 만들어야 한다.

firebase의 realtime database에서 snapshot.val()을 통해 가져온 객체를
아래의 절차를 통해 배열화할 수 있다.

const data_obj = snapshot.val();

Object.entries(data_obj).map((d) =>
  Object.assign({}, e[1], {id: e[0]})
);
//위아래 결과값은 물론 동일하다. spread operator가 더 간결한 듯 싶다.
Object.entries(data_obj).map((d) =>
  ({...d[1]}, ...{id: d[0]})
);

//최종 사용 예시
export function firebaseObjectToArray(snapval) {
  if (snapval) {
    return Object.entries(snapval).map((e) => ({ ...e[1], ...{ id: e[0] } }));
  }
}

코드를 자세히 뜯어보면 아래와 같다.

//code1
const data_obj = snapshot.val();
console.log(data_obj)

//code1 console창
{
  key1111: {key1: 'value1', key2: 'value2'}, 
  key2222: {key1: 'value11', key2: 'value22'}
}

기본 snapshot value를 콘솔 찍어보면 위처럼 나온다.
Object.entries()는 객체를 배열로 바꿔 반환한다.

//code2
const data_ent = Object.entries(data_obj)
console.log(data_ent)

//code2 console창
[
  ["key1111", {key1: 'value1', key2: 'value2'}], 
  ["key2222", {key1: 'value11', key2: 'value22'}]
]

배열의 [0] 요소에는 key값이, [1] 요소에는 value값이 그대로 들어간다.
이제 Array의 map 메소드를 이용해 한바퀴 돌아주면서 처리해줄 수 있다.

//code3
Object.entries(data_obj).map((d) =>
  ({...d[1]}, ...{id: d[0]})
);

//code3 console창
[
  {id:"key1111", key1: 'value1', key2: 'value2'}, 
  {id:"key2222", key1: 'value11', key2: 'value22'}
]