Component 분리 → 검색기능 구현 중2

‣ input에 value가 있으면 mockData에 있는 product 데이터의 name이 뜨고 아니면 검색내용이 없습니다 라는 3항연산자를 완성하였다. 이제 할 일은 내가 input에 검색한 값이 나오도록 해야한다.

const filteredItem = productList.filter(alcohol =>
    alcohol.name.toLowerCase().includes(inputWord.toLocaleLowerCase())
  );

📌 input에 검색어를 쳤을 때 mockData에 있는 값을 필터링 해 줄수 있는 필터 함수를 만들었다.

<ProductItemListUl>
        {inputLength === 0 ? (
          <SearchItem />
        ) : (
          filteredItem.map(product => (
            <Link
              key={productList.producttypeId}
              to={`/productinfo/${productList.name}`}
            >
              <ProductItemList key={product.producttypeId}>
                {product.name}
              </ProductItemList>
            </Link>
          ))
        )}
      </ProductItemListUl>

📌3항 연산자로 이동하여, [productList.map](http://productList.map) 을 [filteredItem.map](http://filteredItem.map) 로 변경해준다.

👩‍💻 멘토님들과 동기들의 도움을 받아 처음 완성해 본 기능구현 성공👍