const [isClickedSearch, setIsClickedSearch] = useState(false);
isClickedSearch
을 기준으로 검색창 UI를 조건부 렌더.{isClickedSearch && (
<form
className="searchModalContainer"
onSubmit={e => {
const keyword = e.target.keyword.value;
fetch(`keyword=${keyword}`);
navigate(`/Search?${keyword}`);
}}
>
<input
className="searchBar"
type="text"
name="keyword"
placeholder="Search Brand, City, Food..."
autoFocus
/>
</form>
)}
isClickedSearch
값을 변경해주는 함수를 Search 탭을 클릭할 때 호출되도록 구현.const toggleSearch = () => {
isClickedSearch ? setIsClickedSearch(false) : setIsClickedSearch(true);
};
<div className="menus" onClick={toggleSearch}>
Search
</div>
toggleSearch
라는 함수는 삼항 연산자를 통해 isClickedSearch
를 true or false로 값을 부여.다음으로 검색창을 띄웠으니 값을 입력하면 새로운 창으로 이동하면서, 동시에 입력값을 API에 보내는 로직을 구현해야했다.
<form
className="searchModalContainer"
onSubmit={e => {
e.preventDefault();
const searchValue = e.target.keyword.value;
fetch(`http://10.58.4.28:8000/search?keyword=${searchValue}`)
.then(res => res.json())
.then(res => {
if (res.message === 'SUCCESS') {
navigate(`/Search?${searchValue}`);
}
});
}}
>
<input
className="searchBar"
type="text"
name="keyword"
placeholder="Search Brand, City, Food..."
autoFocus
/>
</form>;
검색어를 입력해서 새로운 페이지로 이동하면, 이동한 페이지에서 검색값을 기준으로 데이터를 받아오고 이 데이터 개수에 따라 페이지네이션이 적용되게끔 로직을 작성했다.
import React from 'react';
const PageList = () => {
const pageNum = Math.ceil(total / limit);
return (
<ul className="pageLinkContainer">
<li>
<img className="pageLinkPrev" />
</li>
{Array(pageNum)
.fill()
.map((el, idx) => {
return (
<span key={idx}>
{idx + 1}
</span>
);
})}
<li>
<img className="pageLinkNext" />
</li>
</ul>
);
};
export default PageList;