Spread 전개 연산자
1.깊은복사
깊은복사를 하더라도 그림을 새로 그리지 않을 뿐
연산은 이루어진다 그래서 오래걸린다
그림을 새로 그린다는것은 → 렌더해서 출력한다는 뜻
최적화를 위해서 사용하는 것이니
처음에는 몰라도 된다
어떻게 짜든 죽이되든 밥이되든 실행은 된다
하지만 잘 짜려면 깊은 복사로 짜야한다
최적화를 위해서!
자식을 다시 그려야할지 안그려야할지
자식 b는 a에 의존적이다
상태 데이터를 공유한다는 것은 의존성이 있다는 것
상태 데이터를 공유하지않으면 의존적이지 않다는 것
쉽게 예를들면
어떤 큰 창이 있고 상단에 알림 종 표시가 있고
하단에는 채팅을 쓸 수 있는 칸이 있다고 가정하자
그럼 그 채팅칸은 그 큰창안에 속해있다 = 의존적이다
채팅을 쳐서 엔터를 치면 알림종에 숫자1이뜬다
자식의 변화때문에 부모에도 변화가 생겼다
이것이 바로 의존적이라는 것 !
전에 설명했던 컴포넌트 개념을 다시 불러와서 정리해보면
A안에 B
B안에 C
C안에 D
이렇게 물려있을 때
b를 바꾸면 c,d는 전부 새로 그려진다
단! 의존적일때만 의존적이지않다면 전체가 다시 그려지진 않는다
이게 의존적이라는 것
하지만 주의할점이 다시그려지지 않을 뿐 연산은 이루어진다
왜? 비교를 해봐야하니까 서로 의존적인지 아닌지 연산 후
의존적이면 다시그리고 그렇지 않으면 안그리고
다시말해 연산을 하는 이유는 최적화를 위한 것이다
2.깊은복사와 얕은 복사의 차이
깊은 복사와 얕은 복사의 차이를 알기위해
spread연산자 즉 전개연산자 흩뿌리는 연산자를 활용해보자
test.html파일을 만들어서
바디태그안에 스크립트로 이렇게 묶어서 작성했다
<script>
//concat, filter, map, slice, spread(전개) 연산자
const a= [1,2,3];
const b= [...a];
console.log("1.====================스프레드 연산자");
b.push(4); // 불변이 아닌 b의 데이터 변경
console.log(`a의 값은 : ${a}`)
console.log(`b의 값은 : ${b}`)
</script>자 보면 우리는 … 스프레드 연산자를 사용해서
const a 는 배열로 1,2,3을 넣었고
const b 는 전개연산자를 통해 a의 배열값인 1,2,3을 그대로 불러왔다
그리고 b.push(4);를 통해서 b안에 전개연산자로 넣은 a의 값에 4를 추가해서
1,2,3,4 를 만들었고
출력하면 a는 1,2,3
b는 1,2,3,4가 나오게 된다
이게 깊은 복사의 원리이다
그렇다면 얕은복사는 무엇일까?
consta= [1,2,3];
constb= a;
console.log("1.====================스프레드 연산자");
b.push(4); // 불변이 아닌 b의 데이터 변경
console.log(`a의 값은 : ${a}`)
console.log(`b의 값은 : ${b}`)이게 얕은 복사이다
말그대로 복사는했다
a는 배열 1,2,3 이 들어있는데 b = a 이렇게 선언하면
b도 1,2,3 이되고
a 와 b는 같으니까 123 123 같은 수가 나오는데
하단에서 push로 b에 4를 추가했으니 b는 1234 가 된다
이 개념대로면 const b = a 임으로
a도 123 이 아닌 1,2,3,4 가 되어서
출력하면 둘다 1,2,3,4 1,2,3,4 가 된다
얕은복사와 깊은복사의 차이에 대해 간단한 예제를 통해
이해해보았다!
자바에서 배열복사하려면 for문 돌려야하지만
전개연산자로 아주 심플하게 복사가 가능하다!
3.concat 추가
const a2 = [1,2,3];
const b2= a2.concat(4);
이렇게 코드를 짯다고 하면
a2는 그대로 1,2,3
b2는 1,2,3에 4를 추가한 1234가 된다
push와의 차이는 push는 기존 배열을 수정해서 재출력하지만
concat은 기존의 배열은 그대로 두고 새로운 배열에 추가해서 재출력한다
