프론트 엔드 3주 5일차 Spread 연산자와 복사, Infinite scroll

Spread 연산자

스프레드 연산자는 데이터를 복사할 때 혹은 데이터 객체를 묶을 때 사용할 수 있습니다.(또한 나중에 배울 무한 스크롤에서도 사용될 것이다.)

 

spread 연산자를 통해서 데이터 객체를 묶는 방법은 다음의 사진을 보며 알아보자.

 

위의 사진처럼 스프레드 연산자를 사용하면 child와 child2를 합해서 chil3를 만들 수 있었다.

 

저번에 배웠듯이 배열과 객체는 얇은 복사와 깊은 복사가 존재한다. 여기서 깊은 복사를 Spread 연산자를 통해서 할 수도 있음을 배웠다. https://skyofpeople.tistory.com/18 참고

위의 사진처럼 배열을 깊은 복사할 수 있음을 알 수 있다.

 

하지만 이러한 Spread 연산으로는 1차원의 객체와 배열만 깊은 복사를 할 수 있습니다. 즉 배열 안의 배열, 객체 안의 배열 등은 깊은 복사를 하기 위해서는 Spread 연산을 여러번 해야하는 번거러움이 생긴다. 이를 해결하기 위해서 우리는 주로 Json을 사용한다.

Json을 이용해서 객체 혹은 배열을 문자열 형태로 바꾸고 이를 복사하여 다시 문자열에서 객체 혹은 배열로 바꿔주는 것으로 깊은 복사를 하게 된다. 혹은 Lodash라고 하는 객체 복사 라이브러리를 사용할 수도 있다.

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

lodash

 

 

무한 스크롤

무한 스크롤은 저번 시간에 배운 Pagination과 마찬가지로 페이지를 관리하는 방법 중 하나로 주로 앱에서 많이 쓰인다.(ex) 페이스북, 인스타 등) 스크롤을 내려서 끝에 닿으면 새로운 페이지들을 전의 페이지에 아래로 출력해주는 방식으로 주로 리액트에서는 react infinite scroller를 사용하거나 react infinite scroller components를 사용합니다.

 

사용 예시

 

위에서 볼 수 있듯 기본 스크롤 바 이외의 스크롤 바에서도 적용할 수 있으며 이를 통해서 페이지의 끝까지 한 번에 볼 수 있습니다.

 

 

오늘의 알고리즘

오늘은 배열 메서드 sort()의 문자열에서의 활용법을 알 수 있었습니다. 문자열도 아스키 코드로 정해진 순서가 있어 이를 부등호를 통해서 True False로 순서를 표시할 수 있었고 이를 이용해서 sort로 문자열을 정렬해 줄 수 있었습니다.

 

오늘의 코딩 결과