15일차 / Shallow-Copy, Infinite-Scroll

14일차 코드리뷰

경로 components/pagination/01
다른 디자인의 pagination을 쓰고 싶을 때 나누어 사용

디자이너들과 공유하는 스토리북
https://brunch.co.kr/@kmongdev/17

이상한 복사(Shallow-Copy / Deep-Copy)

let profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}


let profile2 = profile


profile2
{name: '철수', age: 8, school: '다람쥐초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐초등학교'}

일반 복사

profile2.name = "영희"
'영희'
profile2
{name: '영희', age: 8, school: '다람쥐초등학교'}
profile
{name: '영희', age: 8, school: '다람쥐초등학교'}

profil2의 이름을 바꿨는데 profile까지 바뀌었다.
사본을 바꿨는데 원본이 같이바뀌는 이상한 상황이 된다.

객체 / 배열을 복사하려면 ?

String, Number, Boolean은 값이 저장되지만 객체/배열은 주소가 들어간다.

저장은 엉뚱한 데 되어있고 거기에 저장된 주소가 들어와있는 구조

값이 저장되어있는 곳은 사실은 같은 곳이다.
그래서 철수를 영희로 바꾸면 다같이 바뀌는 것이다.

중괄호, 대괄호를 쓰는 순간 주소가 만들어진다.
그래서 중괄호를 써서 새로운 주소를 만들어주어야 한다.
엄밀히 말해서 통째로 복사는 불가능하고, 주소를 새로 만들어 각각의 값만 낱개로 가져온다.

let profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}


let profile2 = {
    name: profile.name,
    age:profile.age,
    school:profile.school
}


profile2.name = "영희"
'영희'
profile2
{name: '영희', age: 8, school: '다람쥐초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐초등학교'}

하지만 복사는 코드를 간략하게 하기 위해 하는 것인데, 복사를 한 객체가 코드량이 더 많아진다.
그래서 이것을 보완하기 위해 스프레드 연산자를 사용한다.

let profile3 = {...profile}


profile3
{name: '철수', age: 8, school: '다람쥐초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐초등학교'}

profile3.name = "훈이"
'훈이'
profile3
{name: '훈이', age: 8, school: '다람쥐초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐초등학교'}

괄호를 사용했기 때문에 새로운 주소를 만들어주었고, profile3에만 훈이가 적용됐다.

let profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교",
    hobby: {
        hobby1: "수영",
        hobby2: "게임"
    }
}


let profile2 = {
    ...profile
}


profile2
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}age: 8hobby: {hobby1: '수영', hobby2: '게임'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}age: 8hobby: {hobby1: '수영', hobby2: '게임'}name: "철수"school: "다람쥐초등학교"[[Prototype]]: Object


profile2.hobby.hobby1 = "독서"
'독서'

profile2
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임'}
name: "철수"
school: "다람쥐초등학교"

profile
{name: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임'}
name: "철수"
school: "다람쥐초등학교"

profile을 복사하고, profile2에는 다른 취미를 적용하고 싶었으나 독서가 함께 적용된다.

이것을 얕은복사(Shallow-Copy)라고 한다.

JSON.parse / JSON.stringify

객체를 문자열로 바꾸는 명령어

안에 문자열이 들어가있으면 문자열을 객체로 만들어준다.

아까 만들어진 객체와 완전히 다른 객체가 되기 때문에, hobby에 "수영"이 출력된다.

==> 배열의 복사도 같은 방법이다!

lodash

많은 기능을 제공하는 라이브러리

lodash import할 때 언더바를 사용하는 것은 관례.

무한스크롤(Infinite-Scroll)

보통은 라이브러리를 사용해서 만든다.
댓글도 스프레드 연산자를 바탕으로 된다.

예를들어 aaa, bbb 두 그룹을 하나로 합치고 싶다.
해보니깐 const ccc = [aaa값, bbb값] 는 안된다.
값을 일렬로 늘여뜨리고 싶은데 통으로 들어가게 된다.
const ccc = [[aaa배열], [bbb배열]]
그래서 스프레드 연산자를 써봤다.
const ccc=[...aaa값, ...bbb값]
안에있는 것을 꺼내서 나열시키니까 한줄로 연결이 된다.
이 원리를 사용해서 해야하는 부분이 무한스크롤.
무한스크롤을 댓글에 적용해해야한다.

스크롤 내리면 아래쪽 10개씩 받아오기
지금 이미 10개가 있고, 10개가 배열안에 들어있는 상태.
스크롤내리게되면 다음 10개를 배열로 받아오게 된다.
[{},{},{}...][{},{},{}...]
이 두개를 어떻게 합칠것인가?
기존 것(사용하고 있는 useQuery)을 스프레드 시키고
next로 받을 것을 스프레드 시켜서 하나로 받으면 된다.

const 이전댓글들 =[댓글1,2...10]
const 추가댓글들 = [댓글11,12...20]
=> 스프레드 연산자 사용
const 전체댓글들 = [...이전댓글들, ...추가댓글들] // [댓글1..20]

fetchMore : 추가적으로 더 fetch를 함.
추가 쿼리가 더 날아간다.
날아갈 때 어떤 페이지를 fetch 할 것인가?
fetchMore에 UpdateQuery를 작성할 수 있게 된다.
UpdateQuery에서 해주는 역할은 백엔드에서 가지고 오면 실행되는 것.
기존에 가지고 있던 쿼리들을 업데이트하게 된다.
prev : 이전 데이터 (이전 useQuery)
지금 추가적으로 fetchMore에서 받아온 것들이 fetchMoreResult에 들어가있음 (11~20번댓글)
prev에는 1번~10번 댓글들

원하는 부분에만 스크롤을 넣는법!