[EFFECT] 검색 효과 05 : filter()메서드를 통해 중요도 순으로 검색하기

🔍 검색 효과 : filter()를 이용하여 속성 중요도 순으로 검색하기

이번 시간에는 filter 통해 중요도 순으로 클릭할 경우 속성이 나타나는 실습을 해보겠습니다.
+ 추가로 중요도(별)이 몇개 이상일 경우 해당 속성이 나오는 실습도 해보겠습니다......... 🥲

---

#1. HTML / CSS 설정하기

! HTML TIP !
search__click에서 li 요소에게 data-데이터명="데이터 값"을 설정합니다. => 추후 스크립트에 사용하기 위함! (클릭이벤트, 숫자 치환)

✏️ HTML 스크립트 보기

<main id="main">
    <div class="search__wrap">
        <span>filter()를 이용하여 속성 클릭 시 중요도 순으로 보여주기</span>
        <h1>CSS 속성 검색하기</h1>

        <div class="search__click">
            <ul>
                <li data-star="0"><a href="#">☆☆☆☆☆</a></li>
                <li data-star="1"><a href="#">★☆☆☆☆</a></li>
                <li data-star="2"><a href="#">★★☆☆☆</a></li>
                <li data-star="3"><a href="#">★★★☆☆</a></li>
                <li data-star="4"><a href="#">★★★★☆</a></li>
                <li data-star="5"><a href="#">★★★★★</a></li>
            </ul>
            <ul>
                <li data-num="1"><a href="#">1개 이상</a></li>
                <li data-num="2"><a href="#">2개 이상</a></li>
                <li data-num="3"><a href="#">3개 이상</a></li>
                <li data-num="4"><a href="#">4개 이상</a></li>
            </ul>
        </div>

        <div class="search__info">
            <div>CSS 전체 속성 : <span class="num">0</span></div>
            <div>CSS 선택 속성 : <span class="num2">0</span></div>
        </div>

        <div class="search__list">
            <ul class="line"></ul>
        </div>
    </div>
</main>
<!-- //main -->

! CSS TIP !
이전 검색 이펙트와 스타일이 동일하며 새로운 구조인 search__click의 스타일을 설정해주시면 됩니다!

✏️ CSS 스크립트 보기

.search__click {
    margin-top: 10px;
    margin-bottom: 30px;
}

.search__click li {
    display: inline;
}

.search__click li a {
    display: inline-block;
    border: 1px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px 20px;
    margin: 5px 0;
}

.search__click li a:hover {
    background-color: var(--htmlColor);
    color: #fff;

---

#2. JAVASCRIPT : 스크립트

이번 스크립트에서는 filter() 메서드, 그리고 매개변수를 통해 스크립트를 작업해보겠습니다.
자세한 내용은 아래의 스크립트 주석과 함께 살펴보겠습니다!

! JAVASCRIPT TIP !
1. for of : 반복문 2. 변수명.filter((element) => element 조건식) : 변수에서 해당 조건에 해당하는 요소를 가져옵니다.
3. dataset = data-데이터명="데이터 값"을 모두 불러오는 속성!

//01.선택자
//cssProperty : 데이터 객체화 시키기
const cssProperty = [
    { star: 1 , name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " },
    { star: 5 , name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." },
    { star: 4 , name: "align-items", desc: " 교차축에서 아이템 정렬 하는 속성입니다. 주로 flex에서 item들을 정렬할 때 사용됩니다." },
    { star: 1 , name: "align-self", desc: " 특정 item의 정렬을 따로 하고 싶을 때 사용합니다." },
    { star: 1 , name: "all", desc: " CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값로 설정할 수 있습니다." },
    { star: 3 , name: "animation", desc: " 애니메이션과 관련된 속성을 일괄적로 처리합니다." },
    { star: 3 , name: "animation-delay", desc: " 애니메이션 지연 시간을 설정합니다." },
    { star: 3 , name: "animation-direction", desc: " 애니메이션 움직임 방향을 설정합니다." },
    { star: 3 , name: "animation-duration", desc: " 애니메이션 움직인 시간을 설정합니다." },
    .
    .
    .
    { star: 3 , name: "z-index", desc: " 엘리먼트의 겹쳐지는 순서를 지정한다." }
];
const searchList = document.querySelector(".search__list ul"); //서치리스트
const searchClick = document.querySelectorAll(".search__click ul li"); //클릭 요소
const searchNum = document.querySelector(".search__info .num"); //전체속성
const starNum = document.querySelectorAll(".search__click ul li a") //별

//전체속성갯수표시
searchNum.innerText = cssProperty.length + "개";


//02 출력하기 : 출력하기를 함수화 시키기 : 이렇게 할 경우 재활용이 가능한 스크립트가 된다!
//2.매개변수를 받아서 작업
function updateList(cssProperty2){
    listCSS = "";

    //for of문을 사용하여 반복.
    //3.받은 매개변수 값을 다시 data라는 변수에 저장시킨다. 즉 data == cssProperty
    for( const data of cssProperty2 ){
        //서치리스트 ul안에 들어갈 li리스트의 구조 설정!
        // listCSS += `<li>${data.name}: ${data.desc} <em>${data.star}</em></li>`;

        //숫자 별로 치환 방법1
        //변수를 설정하여 텍스트 별의 데이터값을 넣는다.
        // listStar = starNum[data.star].innerText;
        // listCSS += `<li>${data.name}: ${data.desc} <em>${listStar}</em></li>`;
        
        // 방법2 : if문을 통해 리스트의 구조 중 숫자를 별로 치환해주기.
        if(data.star === 0){
            listCSS += `<li>${data.name}: ${data.desc} <em> ☆☆☆☆☆ </em></li>`;
        }
        if(data.star === 1){
            listCSS += `<li>${data.name}: ${data.desc} <em> ★☆☆☆☆ </em></li>`;
        }
        if(data.star === 2){
            listCSS += `<li>${data.name}: ${data.desc} <em> ★★☆☆☆ </em></li>`;
        }
        if(data.star === 3){
            listCSS += `<li>${data.name}: ${data.desc} <em> ★★★☆☆ </em></li>`;
        }
        if(data.star === 4){
            listCSS += `<li>${data.name}: ${data.desc} <em> ★★★★☆ </em></li>`;
        }
        if(data.star === 5){
            listCSS += `<li>${data.name}: ${data.desc} <em> ★★★★★ </em></li>`;
        }
    }

    //서치리스트에 위의 구조를 innerHTML을 통해 넣어준다.(요소를 넣어야 하므로!)
    searchList.innerHTML = listCSS;

}
//1. 매개변수로 위의 변수값 가져온 후 함수에 저장 
updateList(cssProperty);


//03. 클릭하기
//searchClick의 요소 모두 선택 후 이벤트 클릭 설정(이벤트 리스너는 다중 선택자가 불가하므로 반복문을 통해 다중 설정이 가능!)
searchClick.forEach(element => {
    element.addEventListener("click",()=>{
        //위의 html에서 searchClick의 li의 data-star 속성을 가져온 후 target변수에 저장
        const target = element.dataset.star;
        //마찬 가지로 위의 data-num 속성을 모두 가져온 뒤 target2에 저장!
        const target2 = element.dataset.num;

        //콜백함수
        //filter와 find의 사용법이 같다. 다만 조건을 쓸 수 있다는 점에서 다르다!
        const filterList = cssProperty.filter(data => data.star == target || data.star >= target2);

        //매개변수로 위의 변수 값을 가져와 함수를 실행시킨다.
        updateList(filterList);
    });
});

---

#3. 결과

원본 소스 보기

원본 페이지 보기