inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 리액트 A-Z[19버전 반영]

전개 연산자(Spread Operator)

spread oparator ...가 deep copy 맞을까요?

733

JH Lee

작성한 질문수 2

0

spread oparator ... 가 deep copy 맞을까요?

Next.js tdd typescript redux react

답변 2

2

John Ahn

안녕하세요.
spread operator는 처음 처음 depth 에서는 깊은 복사를 합니다.

하지만 2 depth부터는 얕은 복사를 합니다.

얕은 복사는 주소 를 복사하기 때문에

const A = [ 'a', 'b'];

const B = A;

console.log( A === B ) ;
=> true
하면 주소가 같기 때문에 console 값이 true로 출력 됩니다.

하지만 spread operator 는 처음 뎁스에서 깊은 복사(주소를 복사하는 것이 아닌 안에 들어 있는 값을 복사)를 하기 때문에

const C = [...A];

console.log( A === C );
=> false
서로 주소 값이 다르기 때문에 false가 나오게 됩니다.

하지만 2 depth 부터는 어떻게 될까요?
const A = ['a', ['b', 'c']];

const B = [...A];

이렇게 정의해주고
console.log(A === B)
=> false 가 나옵니다.
이제는 2depth 부분도 비교해볼게요.

console.log(A[1] === B[1]);
=> true 가 나옵니다.

그렇기 때문에 1depth만 깊은 복사가 되고 2depth 부터는 얕은 복사입니다.
2depth를 깊은 복사 하기 위해서는 여러 가지 방법이 있지만
여기서 간단하게 하려면

const B = [...A[0], ...A[1]]; 이렇게 해주시면 됩니다.
이렇게 하면
console.log(A[1] === B[1])
=> false 가 됩니다.

또는 Loadash cloneDeep 함수를 사용하거나
JSON.parse() 와 JSON.stringfy() 함수를 사용하는 방법이 있습니다.
감사합니다.

0

호호히히히

답변이 이해가 잘 돼요 감사합니당

강의 소스 코드 압축 풀기 오류

0

70

1

런타임 에러 ㅠㅠ

0

85

1

강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ

0

100

1

안녕하세요 개발과 상관없는 질문입니다만

0

111

1

리액트 라우터 관련

0

101

1

react-beatiful-dnd에서 문제가 발생합니다.

0

103

1

react19에서는 react-beautiful-dnd가 설치되지 않습니다.

0

808

1

useEffect로 사용을 해도 되나요?

0

198

1

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

0

195

1

react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다

0

279

2

리액트 dockderfile 작성 시 COPY 질문

0

145

1

next.js에서부터는 react query 필요없는지

0

320

1

기능

0

195

1

오류가 안보여요

0

193

1

CSS

0

217

1

local storage

0

208

1

list컴포넌트 생성하기

0

223

1

검색어 입력 후 초기화하는 방법 궁금합니다!

0

331

1

Banner.css에 대해서

0

445

1

플러그인이 추천을 안해줍니다

0

321

1

마이너스버튼 테스트

0

279

2

리액트 서버 실행 오류

0

1156

2

오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ

0

298

1

creactStore질문이요

1

284

2