React/네이버 클론

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

래모 2022. 12. 18. 17:32

1️⃣ 검색창 꾸미기

https://sand8594.tistory.com/36

 

[React] React Hook Form

설치방법 npm install react-hook-form 이전 코드 import React, { useState } from "react"; import {useForm} from 'react-hook-form'; function TodoList() { const [toDo, setToDo] = useState(""); const [toDoError, setToDoError] = useState("") const onChan

sand8594.tistory.com

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

 

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>