searchEffect04 - find()

{
    const searcBox = document.querySelector("#search-box");  //검색하기 변수에 저장
        const cssCount = document.querySelector(".count");      //전체 목록 갯수 변수에 저장
        const cssDesc = document.querySelector(".desc");        //css 속성 설명 변수에 저장
        const cssList = document.querySelector(".list");        //css 속성 목록 변수에 저장
        

        // CSS 속성 값/전체 갯수 출력하기
        cssProperty.map((element, index) => {
            cssCount.innerText = "전체 목록 갯수 : "+ (index+1) +"개";  //css 속성 목록을 텍스트로 사이트에 표시
            cssList.innerHTML += "" + element.name + ""; 	//span태그 + 속성이름 
        })

        searcBox.addEventListener("keyup", ()=>{    //사용자가 입력한 값을 searchWord에 저장
            const searchWord = searcBox.value;         

            findProp(searchWord);   //저장한 searchWord를 함수에 전달	
        });

        document.querySelectorAll(".list span").forEach(span => {   //list의 span들을 클릭하면
            span.addEventListener("click", () => {                 
                const listProp = span.innerText ;   
                findProp(listProp);                                //클릭한 데이터 값을 가져와서 출력
                         
            })
        })

        function findProp(searchProp){     
            const targetData = cssProperty.find((data) => data.name === searchProp)//전달된 값이랑 사용자가 입력한 값이 같으면 출력
	
            //찾는 데이터가 없을 때
            if(targetData == null){
                cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요"; 	//찾는 데이터가 없을때 표시
                return;
            }
            cssDesc.innerHTML= targetData.desc;
        }
}

find() 참고