🚀 오늘의 목표
- Shallow-Copy / Deep-Copy
- 무한스크롤 Infinite-Scroll
1. Shallow-Copy / Deep-Copy
원본을 복사해서 복사본을 만들면 둘다 같은 값이 나와야한다. 이때 복사본을 수정한다고 해도 원본은 변하지 않아야 한다.
위의 프로필을 profile2로 복사해보자.
복사 후 profile2의 name을 철수에서 영희로 바꿨는데 원본도 변해버렸다.
객체나 배열은 복사가 될 때 주소가 복사된다. 그래서 복사본을 수정했는데 원본도 같이 수정된것이다.
그렇다면 객체나 배열을 복사하려면 어떻게 해야될까?
얕은 복사 Shallow-Copy
객체나 배열을 통째로 복사할 수 없다.
하지만 복사하는데 글자를 더 많이 입력하게 된다.
그래서 이걸 더 짧게 스프레드 연산자로 표현할 수 있다. (중괄호나 대괄호가 있는 순간 새로운 주소를 만들게 된다.)
let profile2 = {...profile}
하지만 이렇게 여러 겹의 객체나 배열로 이루어진 애들은 또 주소값을 참조해오게 된다. 그래서 복사본의 hobby를 수정하게 되면 원본의 hobby도 바뀌게 된다.
그래서 이런 복사 방법을 얕은 복사 Shallow-Copy라고 한다.
그렇다면 깊은 복사는 어떻게 하는 것일까?
깊은 복사 Deep-Copy
객체나 배열을 문자열로 바꿔주는 JSON.stringify() 와
문자열을 객체나 배열로 만들어주는 JSON.parse() 를 사용하면 된다.
이 깊은 복사를 더 빠르게 해주는 라이브러리가 있다.
https://www.npmjs.com/package/lodash
lodash - cloneDeep
import _ from 'lodash'
lodash 같은 경우는 _로 import 하는 것이 관례이다.
_.cloneDeep 이런식으로 사용한다.
2. 무한스크롤 Infinite-Scroll
다음과 같은 무한스크롤 형식의 페이지를 구현하고 싶다면 이전 댓글들이 담겨있는 배열과 추가댓글들이 담겨있는 배열을 합쳐서 보여주어야 한다.
이때 배열 두개를 합치기 위해서 스프레드 연산자가 필요하다.
const aaa = [...a,...b] => const aaa = [1,2,3,4]
그냥 const aaa = [a,b] 로 표현하면 const aaa = [[1,2],[3,4]] 로 나오게 된다.
이걸 댓글에 대입해본다면
const 전체 댓글들 = [...이전댓글들, ...추가댓글들] 이렇게 표현할 수 있다.
- fetchMore : 어떤페이지를 더 패치 할것이냐
- page : 패치모어로 패치할 페이지 = 다음 페이지 (1을 더해줘야 함)
- updateQuery : 페이지를 패치하고 오면 업데이트쿼리가 실행되고 기존의 쿼리들을 업데이트 할 수 있다.
- prev : 이전에 날린 쿼리 결과들
- fetchMoreResult : 이후 패치 한 것들
- return : 전체 댓글을 리턴
- fetchMoreResult 가 없으면 기존것만 보여줘 라는 조건 추가
이 내용을 스크롤 내렸을 때 함수 실행시키는 곳에 넣으면 된다.
이제 무한스크롤을 적용해보자. 이는 라이브러리를 사용하면 된다.
https://www.npmjs.com/package/react-infinite-scroller
yarn add react-infinite-scroller
