State 끌어올리기, 스프레드 연산자, Deep copy, 무한스크롤 - 11월 19일

state 끌어 올리기

 

자식1의 카운트가 올라가면 자식2의 카운트를 올리고 싶을때?

두개의 state를 부모로 끌어올린다. 

부모 state를 props로 각각 내려준다.

부모의 setstate를 자식으로 propsfh 내려준다

 

모든 컴포넌트가 하나의 state를 공유 글로벌 state

 

string, number boolean 에 값이 들어가지만

객체, 배열은 값은 다른곳에, 주소만 저장

 

 

profile의 모든 key value들 복사 

...  스프레드 연산자

위와 같이 스프레드 연산자를 사용해도 객체 안의 객체는 저장되지 않는다. (shallow copy)

 

Deep Copy

전체를 문자열로 바꾸고, 문자열을 다시 객체로 돌리기

객체를 문자열로 바꾸기
JSON.stringify(profile)

문자열을 객체로 바꾸기
JSON.parse(JSON.stringify(profile))

속도가 조금 느리기 때문에, 실무에서는 Lodash 사용

https://lodash.com/

Lodash

 

https://www.npmjs.com/package/lodash

lodash

 

객체의 특성

같은 아래 age가 위 age를 대체한다

 

 

무한스크롤

https://www.npmjs.com/package/react-infinite-scroller

react-infinite-scroller

https://www.npmjs.com/package/react-infinite-scroll-component

react-infinite-scroll-component

yarn add react-infinite-scroller

yarn add -D @types/react-infinite-scroller