React : 유튜브 검색창 만들어 보기

import React,{useState} from 'react'
import {BsYoutube,BsSearch} from 'react-icons/bs'
import {useNavigate} from 'react-router-dom'
export const SearchHeader = () => {
  const navigate = useNavigate();
  const [text,setText] =useState('');
  const handleSubmit=(e)=>{
    e.preventDefault();
    navigate(`/videos/${text}`)
  }
  return (
    <header>
      <div>
        <BsYoutube/>
        <h1>Youtube</h1>
      </div>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder='Search...' value={text}
        onChange={(e)=>setText(e.target.value)}></input>
      <button><BsSearch/></button>
      </form>
    </header>
  )
}

<코드해석>

1. 검색창은 form 안에 input과 button으로 묶어 만들어 주었고

2. form이 발생하면 onSubmit을 통해 함수가 실행될건데 그건 handleSubmit

3. input은 text 타입이며 value 값은 text 이다 이 text는 useState를 통해  해당 값이 유튜브의 keyword가 될것이다.

4. onChange를 통해  e 이벤트 . target, value 값을 통해 입력한 값 하나하나를 읽어올것인데 그것 useState인 settext가 담아 text로 가져오게 된다.

5. 해당 키워드로 이동을 하고 url을 이동하기 위해선 useNavigate가 필요한데 사용법은

const navigate = useNavigate 를 통해 쓰면된다.

6. form이 실행될때 navigate (` videos/${text} ` ) 를 쓰게 되면 

내가 헌터팡을 쳤을때 text가 url 뒤에 붙는걸 확인할 수 있다.