11.19 (15)

오늘의 커리큘럼

객체/배열 복사 -> 무한스크롤

state 끌어올리기
같은 state를 공유하는 자식은 부모의 setState를 props해와서 하면 자식에서 부모의 state를 조절할 수 있다.

객체에서 복사 후 안에 있는 내용을 바꿨을 때
복사된 것까지 같이 바뀌게 된다.

문자, 숫자, 불린은 복사한 것은 그대로 복사가 된다
객체, 배열은
값은 다른곳에 저장되어 있고 그 주소만 저장되는 것
그래서 복사를 하면 같은 주소를 복사하게 된다.
그래서 그 안에있는 것을 바꾸면 따라서 바뀌게 되는 것이다.

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

객체를 복사를 할려면 이런식으로 새로 객체를 만들어서 각각을 박아 넣어야 한다.

const friendprofile2 = {
    ...profile
}
// undefined
friendprofile2
// {name: '영희', age: 8, school: '다람쥐초등학교'}

이런식으로 ...profile처럼 해서 새로 만들 수 있다.
복사하는 것처럼 매우 쉽게
이런것을 스프레드 연산자 라고 한다.

배열의 경우에도 [...array] 처럼 해서 복사하는 것처럼 가져올 수 있다.

그러나 스프레드 연산자는 객체안의 객체를 가져올 수는 없다.

...profile
얕은복사 shallow copy
겉에만 복사하는 것이다.

JSON.stringify(profile)
객체를 문자열화
JSON.parse(JSON.stringify(profile))
문자열화 시킨 것을 다시 새롭게 객체화

객체에서 키가 겹치면 아래쪽꺼개 위쪽꺼를 대체한다.