React 게시판 목록 날짜 별로 정렬하기

어느 날 어김없이 유지보수 요청이 들어왔음.

예약목록이 있는데 날짜별로 정렬할 수 있도록 만들어달라 함.

 

예약 목록

 

먼저 대관일시를 클릭했을 때 오름차순인지 내림차순인지 알 수 있도록 

대관 일시

 

표시(▲, ▼)를 추가  후 링크처리 함.

 

//대관일시 컬럼
<th>
    <Link to="#" onClick={e => sortRentDate(e)}>	//클릭 시 로직 추가
        대관일시
        {sortStatus === "up"
            ? "▲"
            : sortStatus === "down"
            ? "▼"
            : ""}
    </Link>
</th>

 

처리 후 정렬 상태를 관리할 변수를 추가해줌.

 

const [sortStatus, setSortStatus] = useState(null); //대관일시 정렬 상태

 

클릭했을 때 실행되는 함수임.

 

//대관일시 클릭했을 때
const sortRentDate = e => {
    //대관일시별 정렬기능
    e.preventDefault();
    if (totalElements <= 10) {	//대관 목록이 10개 이하일 때
        const sortRents = rents.slice(0).sort((a, b) => {	//배열 sort함수
            if (sortStatus === "down") {
                setSortStatus("up");
                return new Date(a.startTime) - new Date(b.startTime);	
            } else {
                setSortStatus("down");
                return new Date(b.startTime) - new Date(a.startTime);
            }
        });
        setRents(sortRents);	//정렬된 목록 다시 세팅
    } else {	//대관 목록이 11개 이상일 때
        getRents({	//서버에서 대관 목록 가져오는 함수
            type: "startTime",
            state: sortStatus
                ? sortStatus === "up"
                    ? "desc"
                    : "asc"
                : "desc"
        });
        if (sortStatus === "down") {
            setSortStatus("up");
        } else {
            setSortStatus("down");
        }
    }
};

 

먼저 대관 목록이 10개 이하일 때, 이상일 때로 나눈 이유는

서버에서 Data를 가져올 때 Page Class를 사용하다보니 페이지별 목록 10개씩(설정한 값)만 받아옴.

그렇기때문에 10개 이하일 때는 서버와 통신하지않고 이미 받아온 목록을 정렬하면 더 빠르게 정렬할 수 있다고 판단했음.(실제 테스트해보니 큰 차이는 없었던 걸로...)

11개부터는 Pageable을 사용하여 sort를 desc, asc로 설정하여 목록을 정렬해 가져옴.

 

    useEffect(() => {	
        sortStatus
            ? getRents({	//대관일시 별 정렬상태
                  type: "startTime",		//sortType
                  state: sortStatus === "up" ? "asc" : "desc"
              })
            : getRents({	//기본 정렬상태(id, desc)
                  type: "id",		//sortType
                  state: "desc"
              });
    }, []);

 

useEffect를 사용하여 대관 목록을 불러오는데 정렬상태(sortStatus)를 이용하여 분기함.

sortType이란 데이터를 파라미터로 전달해주는데 sortType 안에는 위처럼 type, state를 세팅함.

 

//axios 비동기식 통신 코드
//실제코드아님 주의!
axios.get(url +
		"sort=" +
        sortType.type +
        "," +
        sortType.state,
       	data)

 

이런 식으로 서버와 통신할 때 sort 부분에 받아온 sortType(type, state)을 넣어줌.

 

목록 정렬 사진

 

목록 정렬 완료! 끝.

 

다들 행복한 주말 보내길.😉

 

 

📢참조

https://dj-min43.medium.com/react-%EB%82%A0%EC%A7%9C%EC%88%9C%EC%9C%BC%EB%A1%9C-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-9d40c098ad9

React: 날짜순으로 정렬하기