선생님,
황금 주말에도 문제 해결에 도움을 주셔서 감사합니다.
쇼핑몰 프로젝트 진행 중 질문 드립니다.
강의 중간에 추가로 내주신 "버튼을 클릭하면 가나다순 정렬" 을 응용해서,
다시 그 버튼을 클릭하면
1. 버튼 이름은 AtoZ -> 원래대로
2. 배열을 가나다순 정렬 -> 원래대로
배열로 만들려고 다음과 같이 구성했는데,
아직 자바스크립트 생각에 묶여있는 사고인 것 같아
더 좋은 코드로 작성될 수 있는 개념이 있을까 하여 질문드립니다.
< 생각한 방향 >
1. 현재 버튼 상태는 0, id 순서로 배열된 상태, 버튼 모양은 "AtoZ" (클릭하면 띄워야 하므로)
2. 0상태의 버튼을 클릭하면
2-1. 버튼 이름을 "원래대로"로 변경
2-2. 상품 배열을 가나다순으로 배열
2-3. 버튼 상태를 1로 변경
3. 1상태의 버튼을 클릭하면
3-1. 버튼 이름을 "AtoZ"로 변경
3-2. 상품 배열을 id순으로 배열
3-3. 버튼 상태를 0으로 변경
let [shoes, setShoes] = useState(data); //데이터를 조종하는 스위치입니다.
let [sortBtn, setSortBtn] = useState(0);
// 이름 순으로 정렬을 조종하는 스위치입니다. sortBtn(0) 인 경우, 버튼이름을 "AtoZ"
// sortBtn(1) 인 경우, 버튼이름을 "원래대로"로 변경하기 위해 사용했습니다.
let [sortBtnName, setSortBtnName] = useState("AtoZ"); // 버튼 이름을 저장했습니다.
(중간 생략, 버튼 모양은 리액트부트스트랩 이용)
<Button
variant="outline-secondary"
onClick={() => {
let copy = [...shoes];
//if문 이용해서 토글 버튼처럼 만들어보기
if (sortBtn === 0) {
setSortBtnName("원래대로");
setShoes(
copy.sort((a, b) => a.title.localeCompare(b.title))
); //가나다순 배열
setSortBtn(1); // 버튼 상태를 1로 만들어서, 다시 클릭할 수 있도록 했습니다.
} else if (sortBtn === 1) {
setSortBtnName("AtoZ");
setShoes(copy.sort((a, b) => a.id - b.id));
setSortBtn(0); // 버튼 상태를 0로 만들어서, 다시 클릭할 수 있도록 했습니다.
}
}}
>
{sortBtnName} //sortBtn이 0이냐, 1이냐에 따라 버튼 이름이 계속 바뀝니다.
</Button>
