현재 검색 페이지에서 키워드를 입력한 후 해당 키워드에 대한 검색 결과 페이지로 이동하면
검색 결과를 원하는 순서로 정렬(최신순, 채팅 참여 순, 투표 참여 순, 마감 임박 순)할 수 있게 구현을 했습니다.
하지만 검색 결과에 해당하는 게시글들이 원하는 순서로 바로 정렬되지 않고 한 차례씩 뒤로 밀리는 문제가 생겼습니다.
게시글 정렬 기능은 최신순 -> 채팅 참여 순 -> 투표 참여 순 -> 마감 임박 순 으로 테스트해보았는데 아래의 사진들과 같이
채팅 참여 순 정렬을 클릭하면 최신순으로 게시글이 정렬되고
투표 참여 순 정렬을 클릭하면 채팅 참여 순으로 게시글이 정렬되며
마감 임박 순 정렬을 클릭하면 투표 참여 순으로 게시글이 정렬되는 문제를 확인할 수 있습니다.
const handleSortChange = async (sortValue) => {
if (sortValue === '최신순') {
filterSearchData('created_at', 'desc');
} else if (sortValue === '채팅 참여 순') {
filterSearchData('total_comment_count', 'desc');
} else if (sortValue === '투표 참여 순') {
filterSearchData('total_vote_count', 'desc');
} else {
filterSearchData('created_at');
}
};
정렬 탭(SortSelect)을 클릭하면 handleSortChange 함수가 실행되며 해당하는 순서대로 게시글을 정렬해주는 함수 filterSearchData를 호출하게 되고
filterSearchData 함수는 fetchOrderedData 함수를 통해 firestore에 저장된 게시글 데이터를 불러온 후 검색어에 일치하는 게시글들을 필터링하여 postCard 컴포넌트에 게시글 데이터를 전달해주는 방식으로 코드를 작성했습니다.
문제의 원인
리액트의 비동기적 특징 으로 인해 filterSearchData 함수가 순차적으로 진행되는 것을 보장할 수 없기 때문에 정렬 상태가 즉시 업그레이드 되지 않는 문제가 발생한 것이라고 판단했습니다.
현재 filterSearchData 함수에서는 fetchOrderedData 호출 후에 조건문을 사용하여 postData가 존재할 때 게시글 필터링을 진행하게 했지만 이는 fetchOrderedData 함수가 먼저 실행되었는지 확실하게 보장할 수 없기 때문에 코드를 아래와 같이 수정했습니다.
그냥 fetchOrderedData 함수를 호출하는 것이 아니라 fetchOrderedData 함수의 실행 결과를 data 변수에 저장하고,
data 객체가 존재할 때 게시글 필터링을 진행하게 하자 코드가 정상적으로 작동하는 것을 확인했습니다.
또한 fetchOrderedData 함수의 실행 결과를 변수에 저장해야 하기 때문에 fetchOrderedData 함수에서 게시글들이 저장된 dataList 값을 setPostData(dataList); 로 저장하지 않고return dataList 으로 그냥 리턴하도록 수정했습니다.
SearchResult.jsx
현재 검색 페이지에서 키워드를 입력한 후 해당 키워드에 대한 검색 결과 페이지로 이동하면 검색 결과를 원하는 순서로 정렬(최신순, 채팅 참여 순, 투표 참여 순, 마감 임박 순)할 수 있게 구현을 했습니다.
하지만 검색 결과에 해당하는 게시글들이 원하는 순서로 바로 정렬되지 않고 한 차례씩 뒤로 밀리는 문제가 생겼습니다. 게시글 정렬 기능은 최신순 -> 채팅 참여 순 -> 투표 참여 순 -> 마감 임박 순 으로 테스트해보았는데 아래의 사진들과 같이
채팅 참여 순 정렬을 클릭하면 최신순으로 게시글이 정렬되고
정렬 탭(SortSelect)을 클릭하면 handleSortChange 함수가 실행되며 해당하는 순서대로 게시글을 정렬해주는 함수 filterSearchData를 호출하게 되고
filterSearchData 함수는 fetchOrderedData 함수를 통해 firestore에 저장된 게시글 데이터를 불러온 후 검색어에 일치하는 게시글들을 필터링하여 postCard 컴포넌트에 게시글 데이터를 전달해주는 방식으로 코드를 작성했습니다.
리액트의 비동기적 특징 으로 인해 filterSearchData 함수가 순차적으로 진행되는 것을 보장할 수 없기 때문에 정렬 상태가 즉시 업그레이드 되지 않는 문제가 발생한 것이라고 판단했습니다. 현재 filterSearchData 함수에서는 fetchOrderedData 호출 후에 조건문을 사용하여 postData가 존재할 때 게시글 필터링을 진행하게 했지만 이는 fetchOrderedData 함수가 먼저 실행되었는지 확실하게 보장할 수 없기 때문에 코드를 아래와 같이 수정했습니다.
그냥 fetchOrderedData 함수를 호출하는 것이 아니라 fetchOrderedData 함수의 실행 결과를 data 변수에 저장하고, data 객체가 존재할 때 게시글 필터링을 진행하게 하자 코드가 정상적으로 작동하는 것을 확인했습니다. 또한 fetchOrderedData 함수의 실행 결과를 변수에 저장해야 하기 때문에 fetchOrderedData 함수에서 게시글들이 저장된 dataList 값을
setPostData(dataList);
로 저장하지 않고return dataList
으로 그냥 리턴하도록 수정했습니다.