[React]Naver Clone(2) - 검색창 꾸미기

1️⃣ 검색창 꾸미기

https://sand8594.tistory.com/36

[React] React Hook Form

검색창은 옛날에 포스팅했던 위 게시물을 참고하였다

 

const {register, handleSubmit} = useForm
...
<form onSubmit={handleSubmit(onValid)}>
    <Input {...register("search", {required:true})} placeholder="검색어를 입력하세요" />
    <Button><BiSearchAlt/></Button>
</form>

 

2️⃣ 연관 검색창

react-hook-form을 통해 검색되어진 단어에 대해서

연관 검색어를 띄어주고 싶었는데

관련된 api가 없었다 ㅜ.ㅜ

 

그래서 그냥 click값에 따라 연관 검색창을 보여주거나 안 보여주게만 해주었다.

 

const [isClick, setIsClick] = useState(false);
...
<AutocompleteBtn onClick={()=>{setIsClick(prev => !prev)}}> {isClick ? <RxTriangleUp/>:<RxTriangleDown/>}</AutocompleteBtn>