useSearchParams

useSearchParams는 쿼리를 읽을때 사용한다.

가정은, 검색어를 입력하면 검색페이지로 가게되고, 검색페이지에서 검색어를 필터링 하여 보여준다.

// 먼저 searchBar 컴포넌트이다.
function SearchBar() {
	const [query, setQuery] = useState("");
  	const navigate = useNavigate();
  
  	const handleChange = (e) => {
    	const value = e.target.value;
      	setQuery(value);
    } 
  
  	const handleSearch = () => {
    	if(query.trim() === "")return; //빈문자열 방지
    	
      	navigate(`/example/url?query=${encodeURIComponent(query)}`);
    }
    // encodeURIComponent()를 해주지 않으면 글자가 특정상황에 깨짐
  
  return (
  	...
    <input type="text" 
    		value={query} 
			onChage={handleChange}
			onKeyDown={(e) => e.key === 'Enter' && handleSearch()}/>
  )
}

이렇게 해주면 query값을 만들 수 있고, 쿼리값에 해당하는 곳으로 가면 된다.

function SearchPageComponent ({allNews}) {
	const [searchParams] = useSearchParams();
  	const [filteredNews, setFilteredNews] = useState([]);
  	const query = searchParams.get("query") || "";
  	// 아까 navigate로 ?query를 해주어서 key값이 "query"임
  
  	useEffect(() => {
      	if(!query || allNews.length === 0) return;
      
    	const filterArray = allNews.filter((article) => 
        	article.articleTitle.toLowerCase().includes(query).toLowerCase()
);
      setFilteredNews(filterArray);
    }, [query]);
  
  return (
  	...
    filteredNews.map((a) => ...)
  )
}

이런식으로 검색기능을 구현할 수 있었다.