[React.js] 배열을 객체로 변경하던 중 만난 에러 해결

1. 자바스크립트에서 작동하는 코드가 리액트에서는 작동 안돼?!

[그림 1] Javascript에서 문제 없던 코드가 React.js에서 에러를 토해냈다!

 

Javascript에서 문제없던 코드가 React.js에서 에러를 토해냈다! 단지 배열로 되어 있는 위경도 데이터를 객체로 변경하고자 했을 뿐이었다. 자바스크립트에서는 잘 작동되는 for문과 map이 현재 진행 중인 리액트 프로젝트에서는 작동하지 않는 난처한 상황이었다. [그림 1]과 같은 에러를 토해낸 코드는 아래와 같다. 실행해 보면 알겠지만 전혀 문제없는 코드이다.

const arr = [
  [128.63362792028676, 35.2215073061068],
  [128.63362792028676, 35.2215073061068],
];

const newArr = [];
const obj = {};

for (const el of arr) {
  obj["lat"] = el[1];
  obj["lng"] = el[0];
  newArr.push(obj);
}

console.log(newArr);

 

2. 문자열을 JSON.parse 이용해 객체로~

진행 중인 리액트 프로젝트에서 해결한 방법은 map 배열 메서드를 돌릴 때 문자열(JSON)을 만든 후 JSON.parse를 이용해 원하는 객체를 얻는 것이다. 해당 코드는 아래와 같다.

const newArr = tempArr[0].map(el =>
  JSON.parse(`{"lat": ${el[1]}, "lng": ${el[0]}}`),
);