JS 배열 복사와 참조

import React, { useState, useEffect } from 'react';

function MyComponent() {
const [controlData, setControlData] = useState([0, 0]);

const sendControlData = () => {
let sendData = controlData;

if (keys == '') { // stop
  sendData[0] = 0;
  sendData[1] = 0;
}
if (keys == 'a') { // left
  sendData[0] = 0;
  sendData[1] = sendData[1] * (-1);
}
if (keys == 'd') {
  sendData[0] = 0;
}
if (keys == 'w') {
  sendData[1] = 0;
}
if (keys == 's') {
  sendData[0] = sendData[0] * (-1);
  sendData[1] = 0;
}

socket.emit('message', { room: user.MACid, datas: { type: 1, datas: sendData } });

}

return (

<div>
  {/* UI 컴포넌트 */}
</div>

);
}

export default MyComponent;

대충 이런식으로 controlData를 복사해서 데이터 조작을 하려고 했는데 원본 ControlData가 변경되는 문제가 발생했다.

복사 시 참조

let sendData = controlData;
위처럼 하면 sendData에 controlData가 복사된 것이 아닌 controlData를 참조하는 것이다.

얕은 복사

단순 배열인 경우 아래처럼 복사할 수 있다.(얕은 복사)
let sendData = […controlData];

깊은 복사

만약 JSON이거나 이중 이상의 배열의 경우 깊은 복사를 사용해야 한다.
아래는 얕은 복사와 깊은 복사의 예시

얕은 복사 예시

const originalArray = [1, 2, 3, { a: 1, b: 2 }];
const shallowCopy = [...originalArray];

// 얕은 복사에서는 최상위 요소만 복사됩니다.
shallowCopy[0] = 99; // 원본 배열은 변하지 않음
shallowCopy[3].a = 99; // 원본 배열의 객체도 변경됨

console.log(originalArray);
// 출력: [1, 2, 3, { a: 99, b: 2 }]
console.log(shallowCopy);
// 출력: [99, 2, 3, { a: 99, b: 2 }]

깊은 복사 예시

const originalArray = [1, 2, 3, { a: 1, b: 2 }];
const deepCopy = JSON.parse(JSON.stringify(originalArray));

// 깊은 복사에서는 모든 레벨의 데이터가 복사됩니다.
deepCopy[0] = 99; // 원본 배열은 변하지 않음
deepCopy[3].a = 99; // 원본 배열의 객체도 변하지 않음

console.log(originalArray);
// 출력: [1, 2, 3, { a: 1, b: 2 }]
console.log(deepCopy);
// 출력: [99, 2, 3, { a: 99, b: 2 }]