React-Native에서 검색기능 구현하기! (전역상태관리 없이 props로만 )

 

이번 앱에서 검색기능 중에서도

제일 고민했던부분은 추천검색어 부분이였다!

추천검색어 하기전에 검색 기능부터!

추천검색은 다음포스팅에 남길게요!ㅎㅎ

 

검색기능은 키워드를 담고 

서버에 param으로 키워드와 함께 보내는

방식이라고 생각하면된다!

 

일단 검색기능을 구현하려면

keyword를 작성 후 버튼이벤트가 발생하면

useState에 keyword가 담겨

검색할수 있도록 로직을 구현하였다.

이렇게해야 추천검색어 기능도 할수있기에..ㅎㅎ

 

 

  const onChangeSearch = (keyvalue, e) => {
    setSearchWord({
      ...searchWord,
      [keyvalue]: e,
    });
  };

▲ 키워드를 담아주는 로직

리액트네이티브에서는 이벤트와 키밸류를 

함께 받아주어함!ㅎㅎ

const getSearchContent = (keyword, pageParam, size) => {
  return getRequest({
    method: "get",
    url: `/search/artizens?keyword=${keyword}&page=${pageParam}&size=${size}`,
  });
};

▲ url에 keyword를 param으로 담아 보내기!ㅎㅎ

리액트 쿼리를 사용해 config를 만들어 로직구현!

 

 const {
    data,
    isLoading,
    isError,
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage,
    refetch,
    remove,
  } = useFetchSearch(sendKeyword?.keyword);

▲검색컴포넌트에서 키워드를 담아 보내주고

검색내용을 받는다!

 

 

 <TextInput
          style={styles.input}
          value={searchWord}
          name="search"
          onChangeText={(e) => onChangeSearch("keyword", e)}
          onSubmitEditing={onPressSearch}
          placeholder="전시, 장소, 공연, 출연진, 작품검색"
          returnKeyType="search"
        />
        <TouchableOpacity
          onPress={() => {
            onPressSearch();
          }}
        >
          <Image source={require("../../../assets/Icon/Search-bg-ver.png")} />
        </TouchableOpacity>

▲ UI에서는 TextInput으로 사용해야함!

그리고 앱이기에 검색어를 작성하고

온클릭 이벤트와 키판의 확인 버튼이 같이 로직이

구현되어야한다!

 

그래서 

returnKeyType="search"같이 키타입을 지정해야합니다!

그럼 키판에서 돋보기모양으로 보임!!

 

 TextInput안에 onSubmitEditing={onPressSearch} 온클릭이벤트를

넣고 찾기버튼 onPress에도 onPressSearch()이벤트를 두개다 넣어준다!

 

 

  const onPressSearch = () => {
    if (!searchWord.keyword.length > 0 && searchWord.keyword) {
      return searchWord;
    } else {
      setSendKeyword({ ...searchWord });
    }
  };

▲ onPress(리액트의 onClick) 함수!

검색이 onChange시에 바로 검색이 되면 안되서

setWord, setKeyWord 두개의 useState로

관리하였습니다!!

SearchWord는 onChange시에만 관리하도록하였고,

searchKetword는 검색기능을 눌렀을때, onPress가 되었을때

 관리하려고 

useState를 생성하여 

진행하였습니다. 그래서 검색어가없는경우에는

setSendKeyword안에 searchWord를 복사하여

넣어주어 기능구현쓰!

 

 

 

 

그래서 요렇게 검색되도록하였다앗!!ㅎㅎ

 

다음엔 추천검색어 기능

포스팅할게욥!ㅎㅎ

 

 

그럼이만 총총