220401_TIL

1. 오늘 목표

가. 객체와 배열을 복사
나. 얕은 복사 깊은 복사
다. 스크롤 형태의 페이지네이션 만들기(무한스크롤)

2. 데이터 복사

String 철수
number 2
Boolean True
객체 1번지
배열 7번지
중괄호 대괄호로 감싸는 순간 '주소'가 하나 생성됨
예시
let profile ={
name : "철수",
age : 8,
school : "다람쥐초등학교"
}
undefined
let profile2 = {
name : profile.name,
age : profile.age,
school : profile.school
}
undefined
이렇게 복사해야되는데 이러면 코드량이 늘고 더 느려짐

3. 그럼 어떻게 복사해야 하는지?

스프레드 연산자 쓰자
...profile

let profile3 = {
    ...profile
}

profile3 바꾼다고 해서 profile 바뀌는게 아님

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

}

let profile2 = {
    ...profile
}

profile2
{naem: '철수', age: 8, school: '다람쥐초등학교', hobby: {…}}age: 8hobby: hobby1: "수영"hobby2: "게임"[[Prototype]]: Objectnaem: "철수"school: "다람쥐초등학교"[[Prototype]]: Object
profile2.hobby.hobby1 = "독서"
'독서'

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

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

이래하면 profile의 hobby의 hobby1도 바뀜

4. 깊은복사

3번에서는 hobby의 데이터 주소를 만들고 그거를 같이 가져오고 그 안에 내용은 복사가 안됨
이런걸 얕은 복사 라고 함
가. 깊은복사를 어케함?
전체를 객체가 아닌 스트링으로 만들어 버리면?
하나의 오브젝트가 되고 그 오브젝트를 다시 JSON.parse({})로 새로운 배열로 만들어 버리면
쌔삥으로 배열이 하나 튀어나옴ㅅㅅㅅㅅ
JSON.stringify()는 객체를 스트링으로 바꿔줌 스트링으로 바꾸면 문자열이 되고 안에 {}는 그냥 텍스트가 됨 이걸 JSON.parse(JSON.stringify())를 하면 새로운 객체가 됨
이 객체는 새로운 객체임
이걸 변수에 담아서 쓰면 아예새로운게 나옴 ㅅㅅㅅㅅ
이런걸 깊은복사라고 함
일반적으로는 얕은복사를 하고
깊은 복사는 deepth한 것을 사용함
저 JSON은 너무 느림

5. lodash 라이브러리

이를 위해서 lodash를 쓰면 빨라짐
lodash에 cloneDeep이 있음
import _ from 'lodash'

6.배열의 복사

const aaa =['철수', '영희', '훈이']
const bbb = [...aaa]
로 얕은 복사 가능 객체랑 동일함

7.수정하기 누르면 클릭한 댓글만 수정하는 방법

state하나 만들어서 index를 넣어주셈
클릭했을 때 setmyindex를 id와 동일하게 바꿔주고
presenter부분에서
myindex와 index가 같으면 수정하기 해주세요~
이거는 한개씩만 가능

8.다중으로 수정하기

setState를 수정하는데 초기값하고 동일하면 state작동을 안함
기존것을 ...으로 복사해서 새거로 만들고 그게 바뀌면 동작하도록 해야됨
근데 state가 길어지면
presenter를 따로 뽑아내서

9.배열 합치기

const aaa = ["철수", "영희", "훈이"]
const bbb = ["맹구", "짱구"]
const ccc = [aaa, bbb]
==> const ccc = [["철수", "영희", "훈이"], ["맹구", "짱구"]]

10.스프레드로 하면

const ccc = [...aaa, ...bbb]
const ccc = ["철수", "영희", "훈이", "맹구", "짱구"]로 됨 ㅅㅅㅅㅅ

11.무한스크롤 구현

[{},{},{}, ...] 이런식으로 구현이 되있음 무한스크롤 되면
[{},{},{}, ...] + [{},{},{}, ...]로 해서 위에처럼 하나로 합치면 됨
계속해서 처음에 있던 데이터에 추가데이터 스프레드 시키면 배열이 계속 늘어남 ㅅㅅㅅㅅ

fetchMore({
variables : {page: Math.ceil(data?.fetchBoardComments.length / 10) + 1}}, //전체갯수/10 =현재페이지 + 1하면 다음페이지가 나옴 ㅅㅅㅅ
updateQuery: { prev, {fetchMoreResult}) => { //prev는 이전useQuery, fetchMoreResult는 11~20글이 들어가 있음
if(!fetchMoreResult?.fetchBoardComments)
return{ fetchBoardComments: [...prev.fetchBoardComments] };

return {
fetchBoardComments: [...prev.fetchBoardComments, ...fetchMoreResult?.fetchBoardComments],
}
}
})
})
이것을 스크롤 내렸을 때 넣어주면됨

12.무한스크롤 라이브러리

react-infinite-scroller
다른 스크롤에 할라면
docs아래부분 보면 DOM scroll events

부족한 부분

맵함수 다시 공부
infinite scroll 함수 부분