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

✔얕은 복사(Shallow Copy)

✔ 깊은 복사(Deep Copy)

✔ 무한 스크롤(Infinte Scroll)

1. 얕은 복사(Shallow Copy)

 - 얕은 복사란 배열이 가진 객체 즉, 주소값을 복사한다.

 - 원본의 값이나 복사된 값이 변경될 경우 두 값 모두 변경되는 단점이 있다.

- profile 배열을 friendprofile에 복사 한뒤  - 원본(profile)의 이름을 영희로 바꾸어 보았다  - 확인을 해보면 원본(profile)과 사본(friendprofile)의 이름이 둘다 바뀜

 - 이러한 얕은 복사에 수많은 객체가 있을 경우 한번에 복사해주는 기능이 있는데 스프레드연산자라고 한다.

 - 배열안에 있는 객체를 한방에 가져올 수 있는 아주 편리한 메서드이다.

- 스프레드연산자(spread): "...(복사한배열)" 이렇게 작성해준다.

 

⭐ 실무에서 활용하는 스프레드연산자

- 위(🔺) 사진처럼 inputs 값들이 중복 됐을 경우 스프레드 연산자를 이용해서 아래(🔻) 사진처럼 간결한 코드로 리팩토링이 가능하다.

 

💥주의할 점

 

 

 

 

 

 

 

 

 

• 배열 안에 있는 키 값들이 중복됐을 경우, 아래의 키 값이 위의 키값을 덮어 씌워 아래 키 값이 출력된다.
• const(상수)로 배열을 변수에 저장해뒀어도 배열안의 객체값은 주소값이기 때문에 각 객체의 변경이 가능하다.

2. 깊은 복사(Deep Copy)

 - 배열안에 있는 모든 객체를 문자열로 바꾼다.

 - 바꾼 그 문자열을 다시 객체로 바꿔준다.

 - 여기서 만들어진 객체는 기존 객체와 다르게 아주 새로운 객체이다(🔻)

1) 예제 01 깊은 복사를 하려면 JSON이라는 기능을 써줘야 한다! JSON.stringfy() & JSON.parse()를 사용한다. profile1을 문자열로 바꾸기 위해 JSON.stringfy(profile1)로 작성 후 문자열로 바꾼 profile1을 다시 객체로 바꾸기 위해 JSON.parse(문자열로 바꾼 객체들) 이렇게 작성해준다. 위 두가지 방식을 한번에 해결 하는 방식은 : JSON.parse(JSON.stringfy(profile1))

2) 예제 02 child2에 child1을 깊은 복사를 해준다. child2의 이름을 '철수'에서 '영희'로 바꾼다. child1과 child2의 출력된 이름을 보면 각 객체를 변경할 때 서로의 객체에 영향을 안준다는 것을 알 수 있다. 하지만 깊은 복사 방식은 속도가 느린 단점이 있어, lodash라는 라이브러리를 통해 속도를 개선시킬수가 있다.

3. 무한 스크롤(Infinite Scroll)

 - 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속해서 로드되는 사용자 경험(UX)방식이다.

장점

1) 사용자 참여 및 콘텐츠 탐색이 쉽다.

2) 다음 콘텐츠를 보기위한 페이지 로드 시간이 짧다.

3) 터치스크린(모바일)일 경우 더 유용하다(모바일 환경에서 훨씬 직관적이고 사용하기 쉬운 형식)

단점

1) 페이지 성능이 느려진다

2) 특정 항목 검색 및 원래 위치로 되돌아오기 힘들다.

3) 스크롤 막대가 실제 데이터양을 반영하지 못한다.

4) 하단(footer)을 찾기 어려워진다.

사용방법

 - 가장 많이 사용되는 react infinite scroller 라이브러리를 설치해준다.

 - yarn add react-infinite-scroller

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• import를 해준뒤 scroll events 코드는 그대로 가져다 쓰면 된다!
• 로딩 부분은 따로 조정해주자!

💥loadMore / hasMore

• loadMore : 스크롤 내릴 때 실행되는 함수
• hasMore : true일 때, 스크롤 내리면 loadMore가 실행이 된다.

💥주의할 점❗❗

• 데이터가 없을때에도 인피니트 스크롤러는 계속 실행중이기 때문에, fetchMore를 멈추기 위해 데이터 자체가 없을 때는 리턴을 해준다!