JavaScript | 복사, 참조, 얕은복사, 깊은복사

eommoonjoo·2021년 1월 27일
3

JavaScript

목록 보기
7/8

Intro 🌼

  • **자바스크립트**를 공부하면 할 수록 수렁에 빠지는 느낌이 들어요. 내가 몰랐던게 막 산처럼 나타나거든요. 오늘 **복사**에 대해서 다시 한 번 생각해 볼 기회가 있었답니다. **내가 아는게 아는게 아니구나...**를 뼈저리게 느끼고 정리해 보는 시간을 가져보려 합니다.

복사 VS 참조 🤔

  • **복사**는 무엇일까요? **참조**는 무엇일까요? **복사**는 복사한 값이 기존값과 연결고리 끊긴 것 **참조**는 복사한 값이 기존값과 연결고리가 남아 있는 것 이렇게 말을 하면 좀 어렵죠?

  • 복사는 연결X, **참조는 연결O**라고 생각하면 쉽게 이해가 될 거에요.

  • 코드를 보면 좀 더 이해하기 쉬워요. 코드안에 설명을 같이 넣어두었답니다.

  • stirng, number,boolean과 같은 원시타입은 **복사**를 객체, 배열 같은 참조타입 들은 참조 라고 생각하면 되어요.(😚 이미 참조타입이 참조네... ㅎㅎㅎ;;;)

얕은 복사 😤

  • 그러면 **얕은 복사**는 무슨 말일까요? 복사를 살짝 한다? ㅎㅎㅎ;;; 맞는 말이긴 해요. 더 깊게 설명을 해보도록 할게요.

  • Object.assign() 은 객체를 복사하는 방법중 하나입니다. 코드를 보면, obj 객체 안에, b 객체가 또 있어요. **Object.assign()**함수를 사용해서, copiedObj 객체를 만들어주었죠. 그리고, 그 객체 안의 c의 값을 3으로 변경해주었답니다. 근데, 오른쪽 창, 콘솔창의 값을 보면, obj의 c의 값도 3으로 변경된걸 확인할 수 있을 거에요. 다시말해서, 복사가 일어나긴 하지만, 이중으로 객체를 이루고 있을 경우에는 참조가 일어난답니다. 이부분을 생각하지 않고, 코드를 친다면 나중에 리액트를 할 때, 의도치 않은 에러가 발생할 수 있는 확률이 생길 수 있답니다. 다른 방법으로는 **...spread 연산자**가 있습니다. 사용 방법은 **Object.assign()**과 다르지 않습니다.
    다만, 차이점이라면 **...spread 연산자**는 iterable 해야 한답니다. **iterable**은 반복할 수 있는 객체를 의미해요. 스트링으로도 만들 수 있고, 당연히 배열로도 만들 수 있는데, 숫자는 안됩니다.

깊은 복사 🤔

  • 그러면 깊은 복사는 무엇일까요? 이중으로 객체를 만들어도 참조가 안되는 복사 랍니다. 가장 널리 사용되는 방법은
    JSON.parse(JSON.stringify(obj)) 랍니다. 어디서 많이 보셨을거에요. 서버와 데이터를 주고받을 때, 프론트와 백이 데이터를 주고받을 때, 많이들 보셨을거에요. stringify 는 객체를 문자열로 만들어준답니다. 즉, 참조타입 을 **원시타입**으로 만들어 버리는거에요. 앞에서 **원시타입**은 참조가 일어나지 않죠. 즉, 완벽하게 복사가 일어난거에요. 그걸 다시 **parse**를 이용해서 객체로 만들어버린거죠.

  • 하지만... 치명적인 단점이 2가지 존재해요. 깊은복사가 일어나지 않는 타입들이 존재합니다. 함수, Date 객체, 정규표현식 등의 데이터는 복사되지가 않아요. 두번째 이유는 다른 깊은복사 방법들(재귀함수, lodash) 보다 느리다는 단점이 있습니다.

  • 다른 방법들은 제가 아직까지 사용을 해보지 않아서, 깊은 설명이 불가능 할 듯 해요... 죄송합니다. 공부해서 추가 설명 꼭 하도록 할게요.

마무리 😁

  • **자바스크립트**는 **리액트**를 이해하기 위해서 반드시 선행되어야 합니다. 하지만, **리액트**를 공부하다가 다시 **자바스크립트**로 넘어가서 공부를 하면, 훨씬 더 잘 이해되는 부분들이 있어요. 그러니, 코딩과 이론을 병행하면, 더 나은 개발자가 될 수 있을거라고 생각합니다. 화이팅!!
profile
세상과 소통을 꿈꾸는 개발자

2개의 댓글

comment-user-thumbnail
2021년 1월 28일

당신은... 천재입니다.

1개의 답글