[React] 검색창 만들기

jw·2023년 1월 25일
0

React

목록 보기
3/8

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;
profile
다시태어나고싶어요

0개의 댓글