프론트엔드 개발자가 되기위한 여정 -15

이정우·2022년 9월 20일
0

frontend-bootcamp

목록 보기
16/60

--15일차--

밸~하!

밸로그 여러분 안녕하세요!
오늘은 얉은복사와 깊은복사에 대해서 이야기 드릴수있도록 하겠습니다!

얉은복사?
깊은복사?
복사는 다 같은 복사 아니야??
라고 생각하실수도있지만
컴퓨터에게는 2개의 복사가 있습니다!
바로 얉은복사와 깊은복사입니다!
그럼 지금부터 얉은복사와 깊은복사의 차이에 대해서 알아볼까요~?
그럼 go go~!

1.얉은 복사VS 깊은복사

복사란 무엇일까요?
여러분 한글파일을 복사해보신적 있으신가요??
한글파일을 복사해서 복사한 파일을 수정해도
처음의 원본파일은 영향을 주지 않는것을 알 수 있습니다!
하지만 코딩에서는 어떨까요??
단순히 코드를 복사 붙여넣기를 하면 어떻게될까요?
처음에 복사한 원본에도 영향을 미치는 경우가 있습니다!
이경우를 얉은 복사라고 하는데요

한번 코드를 통해서 알아볼까요??

const profile={
	name:"정택",
    age:12,
	school:"코드캠프"
}

const qqq=profile
console.log(qqq)
//{name:"정택", age:12,school:"코드캠프"}

이렇게 보면 바로 복사가 된것같죠?
그럼 한번 값을 변경해 볼까요??

qqq.name="정우"
console.log(profile)
//{name:"정우", age:12,school:"코드캠프"}

어???
뭔가이상하죠??
분명히 복사한 qqq를 복사헀는데 원본파일이 수정이 되네요??
이런경우를 얉은 복사라고 합니다!
이해되셨을까요??

조금 어려우신 분들을 위해서 조금 더 설명해볼까요??

그럼 이러한 상황이 왜 일어날까요??

바로 코딩에서의 복사는 파일처럼 복사를 하는것이 아닌 주소값을 복사해 오기 때문에 발생하는 문제입니다!
그래서
파일처럼 복사를 해서 원본에 영향을 주고싶지 않다면
이런식으로 복사를 할수있습니다!

const profile1={
	name:"정택",
    age:12,
	school:"코드캠프"
}

const profile2={
	name:prfile1.name,
    age:profile1.age,
	school:profile.school
}

이해 되셨나요?
물론 예제만 봐서는 어? 이게 뭐가 복사야?
라고 하실수 있습니다
물론 이것은 복사라고 할 수 없죠??
다만 값을 복사해 와서 새로운 객체를 만든거라고도 할 수 있겠죠??

음...더 좋은방법 없나요?? 하나하나 치기 힘들어요..ㅜㅜ
라고 하신다면
새로운 방법이 나왔습니다 !
바로
...이라고 하는 spread연산자 입니다
코드를 통해서 봐볼까요??

const profile1={
	name:"정택",
    age:12,
	school:"코드캠프"
}

const profile2={...profile1}

이렇게 하게 된다면 서로 다른 객체를 생성해서 복사해 올수 있게됩니다!
그래서 이렇게 새로운 주소를 만들어서 값을 복사해온 경우
원본파일에 영향을 안 줄수 있는데요

profile1.name="민겸"
console.log(profile1)
//{name:"민겸", age:12,school:"코드캠프"}
console.log(profile2)
//{name:"정택", age:12,school:"코드캠프"}

자! 이렇게 보니 원본에 영향을 미치지 않는다는것을 알 수 있습니다!!
그럼 이 spread란 연산자로 완벽히 복사를 할 수 있을까요??

코드를 한번 봐볼까요??

const profile1={
	name:"정택",
    age:12,
	school:"코드캠프"
    hobby:{
    	hobby1:"요리",
        hobby2:"독서"
        }
} 

이렇게 객체안에 객체가 있다고 가정을 해봅시다
spread를 사용하면 어떻게 될까요??

const profile1={
	name:"정택",
    age:12,
	school:"코드캠프"
    hobby:{
    	hobby1:"요리",
        hobby2:"독서"
        }
} 

const profile2={...profile2}

console.log(profile2)
//{name:"정택", age:12,school:"코드캠프",hobby:{...}}

이렇게 복사가 될겁니다!
그럼 한번 값을 바꿔볼까요??

profile1.hobby.hobby1="공부"

이렇게 된다면 어떻게될까요??

console.log(profile2.hobby.hobby1)
//"공부"

어??
이상하죠??
분명히 spread연산자를 사용해서 복사를 하고 값을 바꿧는데
다른 객체에도 영향을 미치네요??
왜그럴까요??

저희가 앞서 복사는 주소와 깊은 연관이 있다는것을 이야기 드렸죠??
spread연산자를 사용하면 객체의 주소값을 가져오게 됩니다
즉 원본의 객체안의 객체의 주소값을 가지고 오다보니
복사해온 객체 안의 객체또한도 같은 주소값을 가지고 있어서 영향을 줄 수 밖에없다는거죠!

그럼 이런경우에는 어떻게 해야 영향을 안미칠까요??

const profile2={
	name:prfile1.name,
    age:profile1.age,
	school:profile.school
	hobby:{
    	hobby1:profile1.hobby.hobby1,
        hobby2:profile1.hobby.hobby2
        }
   }

이렇게 해야겠죠?

아! 이부분어디서 봤죠?
spread를 두번쓰면 되겠네요??
바로 이렇게!

const profile2={
	...profile1,
hobby:{
	...profile.hobby
	}
}

이렇게 하면되겠죠!!

자 이렇게 얉게 복사를 한다고 해서 얉은 복사라고 합니다!

그럼 이런생각도 들수있죠!
아...이렇게 힘들게 복사해오게 되네 어떻게 쉽게 깊숙히 복사할수있을까??
라는 생각이요!

그래서 이번에는 깊은복사에 대해서 알아보겠습니다!

어떻게 하면 할수있을까요??
쉬울수도 있지만요!
바로 "문자열"로 만드는겁니다!

코드를 통해서 한번 봐볼까요??

`{
	name:"정택",
    age:12,
	school:"코드캠프"
    hobby:{
    	hobby1:"요리",
        hobby2:"독서"
        }
} `

자 이렇게하면 객체가 아닌 문자열이 되겠죠?
이 문자열을 복사한 이후 객체로 만들면 되겠죠??

어떻게요??
명령어가 있습니다
바로

JSON.parse()

라는 명령어인데요!
한번 예제에 적용시켜볼까요??

JSON.parse('{"name":"정택", "age":12, "school":"코드캠프", "hobby":{ "hobby1":"요리", "hobby2":"독서"}} ')

여기서 의문이 듭니다
이거를 하나하나 다 넣어줘야하나요??
그런 여러분을 위해서 명령어가 있습니다
바로

JSON.stringify()

라는 명려어인데요!
이렇게 사용합니다!

JSON.stringify({
	name:"정택",
    age:12,
	school:"코드캠프"
    hobby:{
    	hobby1:"요리",
        hobby2:"독서"
        }
}
)

이렇게 객체를 안에 넣어주시면 바로 복사를 할수있습니다
한번더 보기편하게 수정해볼까요??

JSON.stringify(profile)

이렇게 하면 훨씬 간단하죠??

자! 어느정도 깊은복사와 얉은 복사의 차이를 알게 되셨나요??

오늘은 깊은복사와 얉은 복사의 차이에 대해서 알아봤습니다

결국에는 같은 주소값의 사용으로 인해서 문제가 생겼고!
이런 부분을 문자열로변환하여 바꿔주는 깊은복사에 대해서 알아갔고
얉은 복사에 대해서도 알아봤습니다!

필요한곳에 필요한 메서드를 사용하여서 여러분들의 코딩에 도움이 되셨으면 좋겠습니다!

그럼 오늘은 여기까지! 포스팅해볼게요!

그럼 밸로그 여러분 안녕~~
밸~바~

profile
주니어 프론트엔드 개발자

0개의 댓글