[JS] 자바스크립트 검색 이펙트 만들기!!

 

---

오늘은 사용자가 input 창에 입력하는 값에 따라 결과를 보여주는 검색 이펙트를 만들어 보았습니다.

이번 예제는 if문에 대한 이해와 forEach(), 선택자 모두 모두 중요한 예제기 때문에 이전에 배웠던 개념을 까먹었거나 헷갈린다면 다시 복습하고 오는 것도 좋습니다!

 

if문의 false 조건 기억나십니까?

 

HTML 코드 : class명을 잘 확인하자!!

<main id="main">
    <div class="search__wrap">
        <div class="search__header">
            <h2 class="title">🤪자바스크립트</h2>                
        </div>
        <div class="search__conts">
            <hgroup>
                <h3 class="title">CSS 속성 검색하기</h3>
                <h4>indexOf() / search()</h4>
            </hgroup>
        </div>
        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요!">
        </div>
        <div class="search__info">
            <div>
                CSS 속성 개수 : <span>0</span>개
            </div>
        </div>
        <div class="search__list">
            <ul>
                <li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
            </ul>
        </div>
    </div>
</main>

 

JS 코드 : 선택자와 if, forEach()를 잘 이해해보자!!

//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li");  //목록 리스트
const searchInfo = document.querySelector(".search__info span")

searchInfo.innerHTML = searchList.length;

//검색
searchBox.addEventListener("keyup", () => {
    const userWord = searchBox.value;   //사용자가 입력한 키워드
    searchList.forEach((el, i, a) => {

        // const cssName = el.getAttribute("data-name");
        const cssName = el.dataset.name;    //data-name 불러오기

        if(cssName.indexOf(userWord)){
            //데이터가 있으면 실행

            el.classList.add("hide");
        } else {
            //데이터가 없으면 실행
            el.classList.remove("hide");
        };
    });
});

 

가장 먼저 HTML 코드와 JS 코드의 선택자를 확인해볼까요?

변수 searchBox는 선택자로 "search__box input"를 선택했으므로 사용자가 검색한 값이 들어가게 됩니다.

변수 searchList는 "search__list li"의 모든 <li> 태그를 담고 있므으로 입력한 모든 <li> 속의 데이터를 의미합니다.

변수 searchInfo는 사용자에게 현재 CSS 속성 데이터가 얼마나 있는지 알려주는 정보 제공 목적으로 <span> 태그를 담고 있네요.

 

따라서 searchList.length는 모든 <li> 태그의 개수를 의미하게 됩니다.

우리는 "innerHTML"을 이용해 <span> 태그(searchInfo)에 데이터를 추가하기 때문에 사용자에게 CSS 속성이 얼마나 등록되어 있는지 보여주게 됩니다.

 

자 이제 제일 이번 예제에서 헷갈리기 쉬운 forEach()와 if문이 등장하는 구간입니다!

먼저 searchBox.addEventListener("keyup"로 사용자가 무언가 입력한 이벤트가 발생하는 걸 알리고 있습니다.

그리고 사용자가 뭔가 입력한 순간 const userWord = searchBox.value는 사용자가 입력한 값(value)이 변수 "userWord"에 들어갈 것이라고 선언한 것입니다.

searchList.forEach((el는 forEach문의 첫 번째 인자 el이 "searchList"의 요소(element)이므로 <li> 속에 입력한 데이터 값을 의미합니다.

여기서 잠깐 HTML 태그를 볼까요?! li 태그의 data-name이 보이시나요?

const cssName = el.dataset.name은 li 태그의 data-name을 변수 cssName에 담겠다는 선언입니다.

 

이렇게 먼저 데이터가 어떻게 저장되고 흐를지 정했다면 if문으로 조건을 실행하게 됩니다.

여기서 우리는 "indexOf()"가 반환하는 값을 살펴봐야 합니다!

 

indexOf(검색값)는 검색한 값과 일치하는 첫 번째 위치값(index)을 반환합니다.

 

배열의 index는 0부터 시작한다는 걸 알고 계시나요!?

만약 이게 무슨 말이지 싶다면 여기서 배열을 한번 살펴보고 옵시다!

indexOf()는 괄호 안에 들어간 검색값의 첫 번째 배열 위치를 반환합니다.

만약 우리가 검색창에 "a"를 치게 된다면 "align-content"와 같은 CSS 속성들은 "a"로 시작하기 때문에 indexOf()는 0를 반환하게 됩니다.

이런 원리를 이해했다면 if문을 다시 볼까요?

 

if(cssName.indexOf(userWord)){
    //데이터가 있으면 실행
    el.classList.add("hide");
} else {
    //데이터가 없으면 실행
    el.classList.remove("hide");
};

 

cssName.indexOf(userWord)는 사용자가 입력한 값과 데이터를 비교하고 입력한 값으로 시작하는 첫 번째 위치값을 반환합니다.

따라서 우리가 입력한 "a"는 "a"로 시작하는 모든 CSS 속성 데이터는 "0"을 반환합니다.

그렇다면 if문에 "0"이 들어가게 되면 어떤 값이 나올까요?

if문에서 false가 나오는 5가지 조건식(0, null, undefined, false, " ")에는 "0"이 포함되어 있으니 결과는..!!

 

따라서 "0"이 아닌 다른 CSS 속성들(a로 시작하지 않는 속성)은 class "hide"의 속성인 display: none;을 가지게 되므로 화면에 출력이 되지 않습니다.

오히려 "0"의 값을 가지는 사용자가 입력한 값들은 el.classList.remove("hide");에 따라 class "hide"가 지워지고(remove) 화면에 출력이 됩니다!!

 

이렇게 indexOf()의 반환값과 if문의 false 조건을 이해한다면 사용자가 입력한 값에 따라 출력하거나 감추는 이펙트를 만들 수 있겠습니다!!

 

다음 시간에는 사용자가 입력한 데이터의 개수만 반환하는 예제를 만들어보겠습니다!!