검색 기능 구현하기

search_header.jsx에서 검색기능을 처리해 보자.

onClick이 되면 클릭한 것을 처리해 줘야 하고

input field에서 사용자가 엔터를 누르면 검색이 되도록 만들어야 하기 때문에

input에서도 onKeyPress라고 한다.

 

해당하는 이벤트를 알고싶으면 on이라고 하면 해당하는 이벤트에 대해서 알아볼 수 있다.

키가 눌러졌을 때 하는 거니까 onKeyPress라고 해준다.

그리고 const onClick은 이벤트를 받아서 해주고 그 다음에 const onKeyPress는 무슨 이벤트를 받아서 이벤트를 처리해준다. 

 

중복적으로 하기보다는 const handleSearch 검색을 처리할 수 있는 콜백함수를 만들 것이다.

함수는 인자를 받지 않아도 되고 원하는 것을 input에 입력된 것을 알아와야 한다.

const에 inputRef를 만들어서 리액트 훅에서는 useRef를 이용해서 계속 메모가 된다.

input에다가 ref로 연결해준다.

 

그리고 handleSearch에서는 클릭이 되어도 handleSearch를 호출하고 

KeyPress가 이루어지면 대신에 모든 키가 눌러지면 handleSearch를 부르는 것이 아니라

언제 뭐 하면 이벤트에 키가 엔터이면 사용자가 handleSearch를 부른다.

 

그리고 handleSearch에서는 검색을 할 건데 값을 읽어와야 하니까 inputRef에 있는 current 안에 있는 value를 이용해서 

검색을 해줄 것이다.

 

onSearch를 받아오는데 search가 되면 컴포넌트 안에서 버튼이 눌러 졌는지 엔터키가 쳐서 검색이

됐는지 상관없고 검색이라는 이벤트가 발생하면 전달해 주는 콜백함수를 불러라고 props으로 전달 받는다.

그리고 이 onSearch에 검색된 결과값을 호출해 준다.

const SearchHeader = ({ onSearch }) => {
  const inputRef = useRef();
  const handleSearch = () => {
    const value = inputRef.current.value;
    onSearch(value);
  };
  const onClick = () => {
    handleSearch();
  };

  const onKeyPress = event => {
    if (event.key === 'Enter') {
      handleSearch();
    }
  };

return (
    <header className={styles.header}>
      <div className={styles.logo}>
        <img className={styles.img} src="/images/logo.png" alt="logo" />
        <h1 className={styles.title}>Youtube</h1>
      </div>
      <input
        ref={inputRef}
        className={styles.input}
        type="search"
        placeholder="Search..."
        onKeyPress={onKeyPress}
      />
      <button className={styles.button} type="submit" onClick={onClick}>
        <img
          className={styles.buttonImg}
          src="/images/search.png"
          alt="search"
        />
      </button>
    </header>
  );
};

onSearch를 받아야하고 전달해주는 것은 searchHeader가 담겨져 있는 App이다.

그래서 app.jsx로 와서 const search라는 것을 만들어 놓을 건데, search는 query라는 param을 받아오고, 이것을 처리해주는 함수가 된다. postman에서 search할 때 query code를 받아와서 넣어준다.

 

여기서 query를 우리의 bts로 바꿔 주면 된다. 백틱키를 이용해서 바꿔주고 query bts를 그냥 query로 바꿔 줘서 요청한다음에 response.text부분을 json으로 바꿔주고 var도 const로 바꿔준다.

 

그리고 console.log(result) 이 부분을 setVideos(result.items) 이렇게 해서 items를 업데이트 해준다. onSearch가 발생하면 search를 호출하게 해준다.(onSearch={search})

 

또 비디오만 리턴되게 &type=video&이렇게 나타내어준다.

그리고 results에 있는 items를 돌면서 기존의 아이템을 다른걸로 만들어 줄건데, 아이템을 하나씩 복사하고 그 위에 id를 덮어준다. item에 있는 id라는 오브젝트 안에 videoid라는 걸로 덮어준다.

 

즉, 아이템을 받아서 새로운 오브젝트를 만드는데 기존에 있는 아이템 정보를 유지하고 아이디만 오브젝트가 아니라

오브젝트 안에 있는 videoId로 덮어 준다. 그래서 처리된 items는 기존에 받아온(밑에 있는)

 

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)