FRONTEND/Javascript

깊은 복사/ 얕은 복사

Ch's Lee 2025. 9. 9. 10:16

깊은 복사 : 요소(데이터) 그대로 형태 그대로 복사

 

예를 들어 파이썬 경우 : a = [[a, b]. [c, d, e]] 그대로 복사하는 것은 깊은 복사이다.

 

a.append(5) 넣으면, a = [[a, b]. [c, d, e], 5] 가 된다.

 

그에 반면 얇은 복사는 주소값을 복사하며, 기존 배열, 리스트와 주소로 공유한다.

 

 

 

react에서 userSate/useEffect에서 사용된다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>배열</h1>
    <script>
        // const, filter, map, slice, 스프레드(전개) 연산자

        console.log("====== 1. 스프레드(전개) 연산자 ======");

        const a = [1, 2, 3];

        // 쉬프트 틱 ` 이라고 함

        console.log(`a의 값 : ${a}`)

        a.forEach(element => {
            console.log(element);
        });

        const b = a;   // 얕은 복사 - 주소를 변수에 저장

        console.log(`얕은 복사후 b의 값: ${b}`);   // b의 값 : 1,2,3

        b.push(4);     // b의 데이터 변경, a의 데이터도 변경
        console.log(`b의 값 추가후 b의 값: ${b}`);   // b의 값 : 1,2,3,4
        console.log(`b의 값 추가후 a의 값: ${a}`);   // a의 값 : 1,2,3,4

        // 깊은 복사 - 스프레드(전개) 연산자
        const c = [...a];   // c배열안에 바꾼 a변수의 값들을 흩뿌린다.
        console.log(`깊은 복사후 c의 값: ${c}`);   // b의 값 : 1,2,3,4

        c.push(5);
        console.log(`c의 값 추가후 c의 값: ${c}`);   // c의 값 : 1,2,3,4,5
        console.log(`c의 값 추가후 b의 값: ${b}`);   // b의 값 : 1,2,3,4
        console.log(`c의 값 추가후 a의 값: ${a}`);   // a의 값 : 1,2,3,4

        console.log(a === b);  // true → 같은 주소(참조 공유)
        console.log(a === c);  // false → 다른 주소(새로운 배열)
        console.log(b === c);  // false

    </script>
</body>
</html>