sort를 이용한 게시글 인기순 정렬 (목록까지 정렬되는 오류 수정)

---

sort를 이용한 인기순위 정렬

firebase를 이용해 게시글을 받아온 후 해당 게시글중 인기순위에 든 목록을 따로 만들어야 했다.

 

우리가 이용한 방법은 sort를 이용하여 게시글을 인기 순서대로 정렬시켜서 원하는 만큼 자르기!

 

먼저 받아온 글들을 출력하면 아래와 같이 배열형태로 구성되어 있었다.

 

우리는 이것을 sort와 slice를 이용하여 정렬한 후 잘랐다. 우리가 원하는 게시글은 3개 이기 때문에 0-3 까지 잘랐다.

 

 

sort 와 slice를 이용한 코드

//받아온 data 
const [contents, setContents] = useState([]);

// 인기 게시글을 가져오기 위한 방법
const bestBoard = contents
    .sort((a, b) => {
      return b["like"] - a["like"];
    })
    .slice(0, 3);

 

return 문 안에 있는 like 는 우리 배열속에 인기 값을 갖고있는 속성이다. 

 

해당 값을 비교하여 정렬한 후, 0, 1, 2 

 

3가지의 값을 가져와 bestBoard 에 담았다. 

 

 

해당 bestBoard를 다시 map을 이용하여 돌려 원하는 값을 출력했다. 

 

 

 

---

여기서 문제가 생겼다..!  

 

기존의 게시판 목록은 정렬시키지 않기

 

기존 data가 담겨있는 배열을 돌렸더니 멀쩡한 순서로 있어야할 게시판 목록에서도 인기순위로 정렬이 되어버렸다. 

 

따라서 새로운 배열을 하나 만들고 복사해. 그것을 sort와 slice를 돌리기로 했다.

 

새로운 배열을 만들어 그걸로 bestBoard를 만들기.

 

const [contents, setContents] = useState([]);
// 기존의 데이터를 복사해 담을 copied 
const copied = [...contents];

// 해당 copied 배열을 sort와 slice를 이용하여 자르기.
const bestBoard = copied
    .sort((a, b) => {
      return b["like"] - a["like"];
    })
    .slice(0, 3);

 

 

이렇게 best 게시물 3개와 기존의 게시물을 보존하는 방법을 알아봤다.