[TIL] 3주차 - 5. js의 객체, 배열 복사 / 무한스크롤

1. 객체 / 배열 복사

객체 또는 배열을 복사하는 법은 두 가지입니다.

 

얕은 복사 (Shallow Copy)

주소값을 복사합니다. 따라서 원본 값 또는 복사된 값을 변경하면 두 값 모두 변경 됩니다.

 

깊은 복사 (Deep Copy)

값 자체를 복사하여 새로운 주소로 넣어줍니다.

같은 주소를 공유하지 않으므로 참조를 공유하지 않게 됩니다.

 

전체를 문자열로 만든 뒤, 그 문자열을 객체로 돌리는 방식입니다.

이를 위한 메서드로 자바스크립트의 JSON.stringfy()와 JSON.parse() 를 사용합니다.

 

JSON.stringfy()

• stringify 메소드는 json 객체를 String 객체로 변환시켜 줍니다.

JSON.parse()

• parse 메소드는 string 객체를 json 객체로 변환시켜줍니다.

 

 

 

깊은 복사는 속도가 느리다는 단점이 있는데요?

이를 개선 시킨 lodash 라는 라이브러리가 있습니다.

 

아래 두 링크를 참고해 주세요!

 

https://lodash.com/

Lodash

 

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

lodash

 

---

 

2. 무한스크롤

 

페이지 처리 방식은 크게 두가지가 있다고 했습니다.

무한 스크롤 방식과 일반적인 방식이 있습니다.

 

이번 시간에는 무한 스크롤 방식에 대해 알아보겠습니다.

 

무한 스크롤 방식

유튜브, 인스타그램, 페이스북, 트위터 등과 같이

아래로 스크롤할 때 계속해서 추가되는 방식의 페이지 처리 방법 입니다.

 

가장 많이 사용되는 라이브러리로 

react infinite scroller 가 있습니다.

 

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

react-infinite-scroller

 

---

 

설치 이후 타입스크립트 오류 해결

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

를 통해 타입 지정이 가능합니다.

 

 

---

Reference

 

• https://ithub.tistory.com/54