무한스크롤 Infinite-Scroll
Shallow-Copy,Deep-Copy
Infinie-Scorll
컴포넌트가 많아지면 스토리북 이라는것을 통해서 가지고있는 컴포넌트를 볼 수있다.
yarn add storybook
https://brunch.co.kr/@kmongdev/17
얕은복사 깊은복사
let child2=child1
했을때 내용만 복사가 아닌 그냥 주소만 복사..
child2.name이 바뀌면 차일드1도 바뀌어버림
통째로 복사하면 이런 단점이생김
그래서
아래와 같이 객체를 새로 만들어준 후 안의 내용을 하나하나 복사해야함!! 깊은복사!
let profile = {
name : '철수',
age : 8,
school : '다람쥐 초등학교'
}
undefined
let profile2 = {name : profile.name,
age : profile.name,
school : profile.school}
undefined
profile2
{name: '철수', age: '철수', school: '다람쥐 초등학교'}
profile2.name = '영희'
'영희'
profile2
{name: '영희', age: '철수', school: '다람쥐 초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐 초등학교'}
근데...복사가 복사가 아니야..너무 길오...
그래서 나온게 있다!!
스프레드 연산자!!!{...profile}
profile3 = {...profile}
{name: '철수', age: 8, school: '다람쥐 초등학교'}
profile3.name = '후니'
'후니'
profile3
{name: '후니', age: 8, school: '다람쥐 초등학교'}
profile
{name: '철수', age: 8, school: '다람쥐 초등학교'}
스프레드 연산자가....완벽할깝..????아니다...안에있는 객체/배열은 복사가안됨
결국 얕은복사!
let profile = {
name : '철수',
age : 8,
school : '다람쥐 초등학교',
hobby :{ hobby1 :'수영',
hobby2 : '게임하기'}
}
undefined
let profile2 = {...profile}
undefined
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '수영', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '수영', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile2.hobby.hobby1='독서'
'독서'
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
프로필1의 하비 객체안의 값이 바뀌어버려뜨아..... 프로필2만 바뀌었으면했는데 ㅠㅠㅠ
프로필의 하비는 하비안희 주소까지 가지고온것...!!
그럼 깊은복사에 스프레드 연산자 할려묜??
안의 내용을 전부다 스트링으로 바꾸고(JSON.stringify()) 카피하고 다시 객체형태로 돌리면 되지!!(JSON.parse()사용)
let profile2=JSON.parse(JSON.stringify(profile))
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
이것이 바로.깊은복사!!!!!!
하면 이렇게 객체안의 객체값 까지 완벽히 가져옴!! 주소형식아니게
let profile2 = JSON.parse(JSON.stringify(profile))
undefined
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
profile2.hobby.hobby1='댄스'
'댄스'
profile2
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '댄스', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
profile
{name: '철수', age: 8, school: '다람쥐 초등학교', hobby: {…}}
age: 8
hobby: {hobby1: '독서', hobby2: '게임하기'}
name: "철수"
school: "다람쥐 초등학교"
[[Prototype]]: Object
더 많은 팁들!!
npm에서 lodash!!!
import from 'lodash'
로데쉬는 임포트시 로 하는게 관례
사용할때 _.clonedeep 같이 씀
무한스크롤
const profile = {
name : "철수",
age : 12,
school : "다람쥐초등학교"
}
undefined
profile.name = '영희'
'영희'
profile
{name: '영희', age: 12, school: '다람쥐초등학교'}
profile={holl : '다람쥐'}
프로필의 객체주소를 담고있는것임.
그래서 콘스트여도 네임 벨류를 바꿀수읶지
하지만 키벨류를 바꿀수는 없다!
키벨류는 프로필이 가지고있는 주소!!!
const aaa=['철수','영희','훈이']
VM3247:1 Uncaught SyntaxError: Identifier 'aaa' has already been declared
const aa=['철수','영희','훈이']
undefined
const bb=['김사장']
undefined
const dd=[aa,bb]
undefined
dd
(2) [Array(3), Array(1)]
const dd=[...aa,...bb]
undefined
dd
(4) ['철수', '영희', '훈이', '김사장']
fetchmore은 updatequery를 사용할 수 있게해줌
updatequery prev 는 이전유즈쿼리 페치모러리절트에는 11~20
