React-Native에서 추천 검색어 기능 구현하기!

 

검색기능이 잘 구현된다면

추천검색어는 아주 쉬워진다!

 

추천검색어는 만들고 있는 

앱특성상 장소가 고정값이기에

장소로 추천검색어를 등록하였다.

 

현업에서 일하다보니 느낀것은

절대 하드코딩금지!!!!!!

 

물론 이번플젝은 공부용 팀플이지만 

실제 회사에서는 절대 하드코딩을 쓰지않는다는점..!!

데이터 컴포넌트를 만들어 사용하던지

json 파일을 만들어 사용한다!

 

 

나는 데이터컴포넌트를 만들어 진행하였다!

 

const RecommendSearchData = () => {
  const datas = [
    {
      id: 1,
      name: "세종문화회관",
    },
    {
      id: 2,
      name: "부산문화회관",
    },
    {
      id: 3,
      name: "예술의전당",
    },
    {
        id: 4,
        name: "금호아트홀",
      },
      {
        id: 5,
        name: "성남아트센터",
      },
      {
        id: 6,
        name: "올림픽공원",
      },
  ];
  return datas;
}

export default RecommendSearchData;

장소데이터 컴포넌트 생성!!

 

 

---

나의 검색로직은 검색어가 담기고 클릭하면

이벤트가 발생해 검색이 되게 구현하였다.

검색로직은 ▼요기 ▼참고!!

 

https://ssocode.tistory.com/29

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

---

 

 

검색창 컴포넌트는 상단고정이고 데이터값에 따라

밑에 컴포넌트들이 바뀌게 삼항연산자를 사용하여 로직을

구현하였다.

 

{searchData?.length > 0 && searchData ? (
        <ScrollViewLayout>
          <SearchRes
            navigation={navigation}
            searchWord={searchWord}
            sendKeyword={sendKeyword}
            searchData={searchData}
            loadMore={loadMore}
          />
        </ScrollViewLayout>
      ) : (
        <>
          {!sendKeyword?.keyword?.length > 0 && !sendKeyword?.keyword ? (
            <RecommendWord
              sendKeyword={sendKeyword}
              setSendKeyword={setSendKeyword}
            />
          ) : (
            <InfoSearchNotAvailable
              navigation={navigation}
              searchWord={searchWord}
              sendKeyword={sendKeyword}
              searchData={searchData}
            />
          )}
        </>
      )}

 

RecommendWord가 추천검색어가 보여지는 컴포넌트이다.

사용자가 검색을 하지않은 경우에 , 처음 화면진입시

추천검색 컴포넌트가 나오게되며

 

사용자가 검색했을때 내용이 없는경우에

검색내용이 없다고 안내된 컴포넌트가 보여지게 처리하였다.

 

 

    <ScrollViewLayout>
      <View style={styles.container}>
        <View style={styles.rowLeft}>
          <Text style={styles.skyBoldText}>아티즌</Text>
          <Text style={styles.blackBoldText}>의 추천 검색어</Text>
        </View>
        <Layout>
          <TextArea>
            {datas.map((data) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    setSendKeyword({
                      ...sendKeyword,
                      keyword: data?.name,
                    });
                  }}
                >
                  <RecSearchText>{data?.name}</RecSearchText>
                </TouchableOpacity>
              );
            })}
          </TextArea>
        </Layout>
      </View>
    </ScrollViewLayout>
  );
};

추천검색어를 누르면 useState에 담기에

ui로직에서 처리!!

 

 

이렇게해서 추천검색어 완성!!

 

 

그럼이만 총총!