SEARCH | 검색 유형04

searchEffect | find()를 이용하여 속성 설명 나타내기

오늘의 목표
💡 스크립트를 통해 속성 리스트를 나타내기
💡 데이터를 입력하고 리스트와 비교하여 설명 출력하기

오늘의 미션
👉🏻 속성 버튼을 클릭했을 때도 설명 출력되도록 만들기

---

1. 사이트 구조 살펴보기

HTML 살펴보기

속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다.

<main id="main">
    <div class="search__wrap">
    <span>find()를 이용하여 속성을 검색하면 설명 보여주기</span>
    <h1>CSS 속성 검색하기</h1>
    <div class="search__box">
        <label for="search">검색하기</label>
        <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
    </div>

    <div class="search__desc">
        속성을 검색하시면 설명이 표시됩니다. !!!
    </div>
    
    <div class="search__info">
        <div>
            CSS 속성 갯수 : <span class="num"></span>
        </div>
    </div>

    <div class="search__list"></div>
</div>
</main>

2. script 살펴보기

📌 속성 리스트 만들고 출력하기

속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다.

📌 속성을 검색했을때 설명 출력하기

addEventListener를 searchBox에 적용하고 사용자가 쓴 값을 변수로 만들어줍니다. 이때의 searchWord는 지역변수로 다른 함수에서는 값을 사용할 수 없습니다. 이럴땐 searchWord를 매개변수로 만들어 속성을 찾는데 이용합니다. return은 출력의 의미도 있지만 종료의 의미도 있습니다 !

📌 속성 버튼을 클릭했을 때 설명 출력하기

findProperty를 사용하여 이벤트를 타겟으로 잡고 구해주었습니다.

<script>
    const cssProperty = [...]
    const searchList = document.querySelector(".search__list");
    const searchNum = document.querySelector(".search__info .num");   //전체 갯수
    const searchBox = document.querySelector(".search__box input");
    const searchDesc = document.querySelector(".search__desc");

    // 출력하기
    cssProperty.map((element, index) => {
        searchNum.innerText = index + 1;
        searchList.innerHTML += `${element.name}`;
    });

    // 속성 버튼을 클릭했을 때, 설명이 출력되도록
    searchList.addEventListener("click", (e) => {
        findProperty(e.target.textContent);
    })

    // 입력하기
    searchBox.addEventListener("keyup", () => {
        const searchWord = searchBox.value;     // 사용자가 쓴 값, 지역변수라 다른 함수에서 값을 가져오지 못함
        // console.log(searchWord);
        findProperty(searchWord);   //searchWord 매개변수로 만들어서
    });

    // 속성찾기
    function findProperty(searchData) {     //전달시키기
        const targetData = cssProperty.find((data) => data.name === searchData);

        if(targetData == null){
            searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요 !"
            return;     //출력의 의미도 있지만 종료의 의미도 있음. 아래 수식이 계속해서 실행되기 떄문에 return으로 종료시키기
        }

        searchDesc.textContent = targetData.desc;
    };
</script>

원본 소스 보기

실제 사이트 보기