Header에서 정렬기준
Header에서 total, cost, fun 등 정렬 값이 바뀌는 건 알겠는데, 이 값이 바뀔 때 점수가 높은순으로 정렬이 되는데, 이 정렬을 지정해주는 실행 코드가 어디에 있는지 모르겠어요.
<div class="filter">
<select id="sortList" class="sort-list">
<option value="total" ${sortBy === 'total' ? 'selected' : ''}>Total</option>
<option value="cost" ${sortBy === 'cost' ? 'selected' : ''}>Cost</option>
<option value="fun" ${sortBy === 'fun' ? 'selected' : ''}>Fun</option>
<option value="safety" ${sortBy === 'safety' ? 'selected' : ''}>Safety</option>
<option value="internet" ${sortBy === 'internet' ? 'selected' : ''}>Internet</option>
<option value="air" ${sortBy === 'air' ? 'selected' : ''}>Air Quality</option>
<option value="food" ${sortBy === 'food' ? 'selected' : ''}>Food</option>
</select>
</div>
답변 2
0
안녕하세요 질문주셔서 감사합니다 🙂
total, cost, fun, internet 등 정렬 기준을 변경하면, 해당 정렬 기준값이 가장 높은 아이템부터 차례대로 나타나게 되는데요, 만약 설정된 정렬 기준값이 동일하다면 total 점수가 높은 아이템부터 반환되도록 api를 설정해두었습니다.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김수현님.
Header에서 각 정렬값이 바뀔 때마다 데이터를 정렬하는 부분은 아마도 데이터 요청(request) 부분에서 처리되고 있을 가능성이 높습니다. 일반적으로, 프론트엔드에서는 선택된 정렬 기준을 서버나 API로 전달하여 그에 맞는 데이터를 받아오는 방식을 사용합니다.
질문에서 보여준 코드에 따르면, <select> 태그 내의 option이 바뀔 때마다 이를 처리하는 이벤트 핸들러가 있을 것입니다. 이 부분에서 서버에 데이터를 요청하는 request 함수가 호출되는데, 이 함수 내부에서 정렬 기준에 맞춰 데이터를 정렬하도록 설정되어 있을 가능성이 큽니다. request 함수는 App 컴포넌트 내부 또는 api.js 라이브러리 같은 위치에 정의되어 있을 수 있습니다.
아래 링크들은 유사한 문제 해결을 위한 예제와 설명을 제공할 수 있을 것 같습니다:
1. select값이 출력이 안돼요 - 선택된 정렬값을 기반으로 API 요청을 보내는 과정과 추후 데이터 업데이트 관련 힌트를 확인할 수 있습니다.
- regionList 클릭시 해당 cities가 안나옵니다. - 유사한 컨텍스트에서 정렬 및 필터링 관련 요청과 데이터 처리의 예제를 얻을 수 있습니다.
총정리하자면, 정렬이 어떻게 수행되는지는 보통 서버 측에서 처리되며, 클라이언트 측에서는 해당 옵션을 전달하는 역할을 수행하게 됩니다. 따라서 handleSortChange 같은 핸들러를 검색하시고, 해당 핸들러 코드에서 어떻게 데이터가 갱신되는지 확인해 보시면 좋을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
콜백 함수 메서드 등록
0
82
2
ssr방식 경험
0
75
1
compare 함수 설명에 오해의 소지가 있어보입니다.
0
82
2
API를 비동기 처리하는 이유가 끊겨서 그런건가요?
0
96
2
DOM 트리 보는 곳
0
81
1
배열과 객체의 구조분해할당 방법이 다른 이유
0
82
2
배열 메서드가 순수 함수인지 확인하는 방법
0
72
2
콜백 함수의 매개변수로 _를 쓰는 이유가 무엇인가요?
0
71
2
콜백 함수의 매개변수는 어떻게 구분되나요?
0
59
1
호이스팅 안쓰는게 좋나요?
0
54
2
함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?
0
82
2
?. 연산자는 자바스크립트 연산자인가요?
0
47
1
JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?
0
83
2
자바스크립트 질문
1
103
2
동물앨범만들기 1-1 api 오류
0
54
2
CityList개발-handleLoadMore함수질문
0
70
1
객체와 배열의 const 차이
0
46
1
const 객체/배열 차이
0
63
2
header 개발 새로고침 오류
0
67
2
Promise 객체
1
58
2
cityList 렌더가 안되는 문제
0
55
2
init 함수 앞에 await
1
66
2
동물 앨범 만들기 pushtState 관련
0
60
2
동물 앨범 만들기 사진 관련 문의
0
75
2