실전프로젝트에 적용할까한 찾기 기능의 구현을 위한
서비바 기능에 대해 적을까한다.

대부분의 웹서비스에 필수인 서치바! 실제 서비스랑은 다르지만 더미데이터를 활용해 쉽게 filter()함수를 이용해 검색기능을 구현해보려고 한다!

How to make Serachbar

우선 코드는 이렇다.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div className="App">
      <input
        type="texy"
        placeholder="Search"
        onChange={(e) => {
          setSearchTerm(e.target.value);
        }}
        {dummyData.filter((val) =>{
          if(searchTerm == ""){
            return val
          }else if(val.title.toLowerCase().includes(searchTerm.toLowerCase())){
            return val
          }
        }
        }).map(data =>{
          return <p>dummyData.title</p>
        })}
      />
    </div>
  );
}

✔ 1.

1. 첫 번째로 useState를 만들어준다.

 const [searchTerm, setSearchTerm] = useState("");

2. 인풋에 입력에 onChanger이벤트를 만들고 입력될 때마다 searchTerm의 데이터가 바뀌게 된다.

<input
        type="text"
        placeholder="Search"
        onChange={(e) => {
          setSearchTerm(e.target.value);
        }}

✔ 2.

3.이렇게 출력만 하던 map함수 앞에 filter함수를 만들어 준다.

  {dummyData.map(data =>{
          return <p>dummyData.title</p>
        })}

4. else if 조건문을 활용해 dummyData의 값과 onChange로 입력한 searchTerm의 값이 같다면 해당되는 값이 반환된다.
{dummyData.filter((val) =>{
          if(searchTerm == ""){
            return val
          }else if(val.title.toLowerCase().includes(searchTerm.toLowerCase())){
            return val
          }
        }
        }).map(data =>{
          return <p>dummyData.title</p>
        })}

✔ 3.결과

이렇게 내가 검색한 결과가 잘 나온다!

map()과 filter()에 대해서 알아보자.

이 둘의 공통점은 새로운 객체를 반환한다는 점이다.
매우 유용한 함수라서 까먹지 알고 알아놓으면 유용하게 활용할 수 있다.

map()

배열을 순회하며 요소마다 callback함수를 적용하고 새로운 배열을 반환한다.
요소들에 일괄적으로 함수를 적용하고 싶을 때 유용하다.

let numbers = [1, 4, 9]
// 일반 함수
let roots = numbers.map(function(num) {
    return Math.sqrt(num)
})

// 화살표 함수
let roots = numbers.map((num) => Math.sqrt(num))

//결과
 roots    [1, 2, 3]
 numbers [1, 4, 9]

filter()

배열의 각 요소에 대해서 ㅜㅈ오진 함수의 결과값이 true인 요소를 모아서 새로운 배열로 반환한다.
중복 제거와 같이 조건에 맞는 특정 요소들만 새 배열에 넣고 싶은 경우에 유용하다.

const people = ['james', 'leno', 'aubameyang', 'saka'];

const arsenalFilter = people.filter(word => word.length < 5);

console.log(arsenalFilter)

//결과
['leno', 'saka']

이렇게 또 한주가 끝났다.
이번주는 많이 무기력한 한주였다.

머 별로 한것도 없는데 시간만 보낸거같다.
많이 느슨해진거 같다.

정신차리자. 다시 텐션을 끌어올리자 긴장하자
난 많이 부족하다. 정신 차려야한다.

죽도록해도 부족하다
나를 믿고 기다려주는 사람들을 위해서라도
끝까지 가자 그리고 타협하지말자
(이정도했으니깐 좀 숴도 되겠지.. 라던지..)

너무 피곤하면 잠시 쉬는건 좋지만...
진짜는 타협하지 않는다.