[EFFECT] 검색 유형04 : map / find()를 통해 검색값 가져오기

🔍 검색 효과 : find()를 이용하여 속성을 검색하기

이번 시간에는 find를 통해 속성을 검색할 경우 해당 속성 설명이 나타나는 효과를 실습해보겠습니다
+ 추가로 속성 버튼을 클릭한 경우에도 해당 속성의 설명이 나타나도록 작업해보겠습니다! 🥲

---

#1. HTML / CSS 설정하기

! HTML TIP !
input의 텍스트 타입은 텍스트를 입력할 수 있는 요소가 생성됩니다. 또한 input의 placeholder 속성은 요소안에 사용자에게 입력 전 문구를 보이도록 해줍니다.

✏️ 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 class="desc">속성을 검색하시면 설명이 나타납니다.</div>
        </div>
        <div class="search__info">
            <div>CSS 전체 속성 : <span class="num">0</span></div>
        </div>
  
        <div class="search__list">
        </div>
    </div>
</main>

! CSS TIP !
이전 검색 이펙트와 스타일이 동일하며 html 구조에 추가된 search__desc 요소의 스타일을 추가해주시면 됩니다.
background-image: url()을 통해 요소 안에 아이콘을 넣어 줍니다.

✏️ CSS 스크립트 보기

.search__desc {
    border: 2px solid var(--htmlColor);
    padding: 20px 40px 20px 60px;
    margin-bottom: 50px;
    border-radius: 50px;
    display: inline-block;
    background-color: var(--htmlColor);
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 16.958L21.5 21.958' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 22px 17px;
}

---

#2. JAVASCRIPT : 스크립트

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

! JAVASCRIPT TIP !
1. 변수명.map((element, index) => {}) : 변수의 인덱스 값(자릿값)을 불러옵니다. 보통 변수가 배열로 저장되어 있을 때 사용합니다.
2. 변수명.find((element) => element 조건식) : 변수에서 해당 조건에 해당하는 요소를 가져옵니다.
2. return : 결과값 출력 뿐만 아니라 종료의 의미로도 쓰입니다.

//01 데이터 객체화 시키기
const cssProperty = [
    { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
    { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
    { name: "align-self", desc: "개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다." },
    { name: "all", desc: "요소의 속성을 초기화 또는 상속을 설정합니다." },
    { name: "animation", desc: "애니메이션과 관련된 속성을 일괄적으로 설정합니다." },
    { name: "animation-delay", desc: "애니메이션 지연 시간을 설정합니다." },
    { name: "animation-direction", desc: "애니메이션 움직임 방향을 설정합니다." },
    .
    .
    .
    { name: "z-index", desc: "요소들의 수직 위치를 설정합니다." },
];
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");

//02 출력하기 : 배열 map()메서드
//map을 통해 선택자에게 데이터 값을 저장하여 불러옵니다.
//element는 cssProperty의 객체, index는 배열에서의 자릿값!
cssProperty.map((element, index) => {
    // searchNum.innerText = index + 1;
    searchNum.innerText = cssProperty.length + "개";
    // searchList.innerHTML += `<span>${element.name} : ${element.desc}</span>`;
    //name이라는 key의 값을 searchList에 불러온다.
    searchList.innerHTML += `<span>${element.name}</span>`;
});

//03 입력하기
//searchWord(변수)에 사용자 입력값을 저장한 뒤 매개변수를 이용하여 findProperty함수에 값을 전달합니다.
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;
    // console.log(searchWord);
    findProperty(searchWord);
});
//함수 밖에 위치했으므로 지역 변수이기 때문에 매개변수 사용하여 전달시키거나 전역변수로 바꿔주기. 현재는 매개변수사용!

//04 속성찾기
//위의 매개변수 searchWord를 함수의 searchWord2 변수에 저장합니다.
function findProperty(searchWord2){
    //find메서드를 통해 데이터의 네임값과 searchWord(사용자 입력 값)이 같은 경우 tagetData에 저장한 뒤 해당 데이터의 desc값을 찾아서 불러옵니다.
    //(data = element(cssProperty의 데이터값))
    const tagetData = cssProperty.find((data) => data.name === searchWord2); 

    //만약 입력값이 없을 경우(null)에는 textContent를 통해 지정문구가 뜨도록합니다.
    if(tagetData == null){
        searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!";
        //아래의 textcontent가 무조건 실행되므로 값이 없는데도 계속 찾으려고 하기 때문에 오류가 나는 것! 때문에 리턴을 써서 종료를 시켜주면 버그를 고칠 수 있다.
        return; //리턴은 결과값 출력 뿐만 아니라 종료의 의미로도 쓰인다.
    }
    searchDesc.textContent = tagetData.desc;
};

//05 클릭했을 때 속성 보이기(반복문은 서치 03번 참고)
//먼저 버튼을 모두 선택해준 뒤 forEach문을 통해 요소를 클릭했을 시 클릭한 요소를 searchBtn에 저장.
//매개변수를 사용하여 함수에게 searchBtn값 전달
const search = document.querySelectorAll(".search__list span");
search.forEach((el) => {
    el.addEventListener("click", ()=> {
        const searchBtn = el.innerText;

        findProperty(searchBtn);
    });
});

---

#3. 결과

원본 소스 보기

원본 페이지 보기