React, Apollo client를 활용한 검색창을 만들어보자
1️⃣ useState
컴포넌트에서 바뀌는 값인 keyword를 관리하기 위해 useState 사용
let [keyword, setKeyword] = useState("");
2️⃣ onChange
keyword바뀔 때마다 setKeword하는 함수 onChange
const onChange = (e) => {
setKeyword(e.target.value);
};
<input
type="text"
placeholder="Search"
onChange={onChange}
/>
3️⃣ useLazyQuery
keyword에 따라 쿼리를 실행해야하기 때문에 useLazyQuery 사용
(그냥 useQuery는 컴포넌트 실행하자마자 쿼리 실행함)
const [startQueryFn, { data, loading }] = useLazyQuery(SEARCH_USERS);
const onChange = (e) => {
setKeyword(e.target.value);
startQueryFn({
variables:{ keyword: e.target.value }
})
};
function Search({ onClose }) {
let [keyword, setKeyword] = useState("");
const [startQueryFn, { data, loading }] = useLazyQuery(SEARCH_USERS);
const onChange = (e) => {
setKeyword(e.target.value);
startQueryFn({
variables: { keyword: e.target.value },
});
};
return (
<SearchContainer ref={modalRef}>
<SearchHeader>
<SearchHeaderText>검색</SearchHeaderText>
</SearchHeader>
<SearchBarContainer>
<SearchBar>
<Keyword
type="text"
placeholder="Search"
value={keyword}
onChange={onChange}
/>
</SearchBar>
</SearchBarContainer>
<SearchResultContainer>
{keyword.length
? data?.searchUsers?.map((user) => (
<UserList
key={user.id}
avatar={user.avatar}
username={user.username}
firstName={user.firstName}
/>
))
: null}
</SearchResultContainer>
</SearchContainer>
);
}
export default Search;