오늘은 불변함수 -> 깊은 복사를 해주는 함수를 배워보자!
깊은 복사를 해야하는 이유?
이런식으로 첫번째 div라는 큰 도화지 안에 해라는 도화지와 나무라는 도화지가 있다..?
그런데 여기서 저 해를
이렇게 달로 바꾸고 싶어서 바꾸면 저 return안에 있는 달과 나무 모두를 렌더링하여 그리게 된다. 하지만 효율적으로 그림을 그리기 위해 '달'이라는 모듈과 '나무'라는 모듈로 나눠서 컴포넌트화를 하여 관리를 할 수 있다.
자, 그럼 저 그림을 따로 쪼개보자!
이렇게 따로 Wood.js라는 파일을 만들고 그 안에 명칭들을 나무에 맞게 바꿨다.
그리고 나서
이런식으로 import 해주고 Wood/를 집어 넣어줄 수 있다.
그럼 여기서 만약에 저 해라는 그림안에 나무라는 그림이 들어가있다면..? 저 해를 그릴때 나무는 그대로 둘지, 아니면 해를 그릴때 나무도 다시 그릴지 선택을 할 수 있다.
리액트 엔진에선 부모(APP)가 다시 그려지면 자식(Wood)도 다시 그려야할 지 연산을 한다. 그리고 다시 그려야하면 다시 그리고, 안그린다 하면 그리지 않는다. 하지만 연산은 무조건 한다는 것
그렇게 되면, 만약 수천개의 데이터가 있으면 그 안에 나무가 있는지를 확인을 해야하는데 이러한 연산을 최적화 시키려면 깊은 복사를 해야한다.
이번 게시글에선 concat, filter, map, slice, spread 연산자를 배워 볼 것이다.
이렇게 변수를 만들고 그 변수를 다른 변수에 할당하는식이면 주소를 참조하는 얕은 복사가 된다.
이렇게 ...을 쓰면 a를 흩뿌리는데 이걸 배열[] 안에 흩뿌린다.
결론적으론 b라는 공간을 새로 만들고 b = [1,2,3]; 이렇게 되는것이다.
증명을 한다면,
먼저 b에 push로 그 배열안에 숫자를 추가하였다.(데이터를 변경한 것) 그 후 a 와 b의 값을 콘솔로 비교를 해보면..?
a는 1,2,3 b는 1,2,3,4가 찍혀 나온다!
두 번째는 추가하는데, 기존에 배열에 추가하는 것이 아닌 새로운 배열을 만들며 추가 할 것이다.
이렇게 a2라는 배열을 먼저 만들고 그 배열에 concat함수로 4를 추가해보았다. 예상되는 결과는 a2=1,2,3 b2= 1,2,3,4가 돼야 할 것!
콘솔을 확인해보니 예상한 결과가 나왔다!
다음은 걸러내기
필터는 a3에 있는 요소를 하나 꺼내서 filter안에 어떤 함수에 집어 넣음. 이 함수에 특징은 true 아니면 false를 리턴 받는다. 이 필터 함수는 true만 걸러내준다.
a3에 필터를 걸어 1이 아닌것들을 출력시킨다!
결과는 2,3이 출력된다
이 필터 함수를 보통 jquery에 remove처럼 삭제할때 많이 쓴다고 한다.
다음은 잘라내기(slice)이다!
인덱스 시작번호부터 직전까지 출력한다.
따라서 b4는 1,2가 출력된다.
또한
이렇게 배열안에 넣어서
이러한 값을 출력할 수도 있다.
이런식으로 1,2,3의 배열 안에 4를 집어 넣는 응용도 가능하다.
다음은 반복하기인데 JSX에서는 자바스크립트에서 사용하듯 for문을 쓸 수 없다.(forEach는 가능하지만 forEach문은 return을 할 수 없다.)
이런식으로 [...a] 와 비슷하게 배열을 복사해서 가져오고 그 안에서 가공도 가능하다. 여기서 소활호 안에 n은 a5에 인자를 하나씩 반복하면서 가져옴.
결과값이 이렇게 출력된다.
그리고
이런식으로 출력이 가능하다! 이번 게시물은 여기까지
이 글은 유튜브 메타코딩 채널의 강의를 보며 공부한 내용을 기록한 것입니다.
