자연어처리를 연습해보고 싶은 팀원이 있어 예정에 없던 검색페이지를 만들기로 했다😆

구현방법

TextInput에 텍스트가 입력이 될 때마다 자연어처리된 데이터를 받아야한다!

• TextInput에 onChangeText가 발생할 때마다 들어온 value를 파라미터로 담아 POST를 이용한 fetch 함수가 동작하도록 설정한다.
• 서버로부터 받은 data를 state에 저장한다.
• 데이터의 양이 얼마나 될 지 모르기에 FlatList를 통해 해당 데이터를 알맞는 형태로 render한다.

Fetch

TextInput

• TextInput을 생성하고 함수를 지정해준다.

Function

• fetch를 실행할 함수를 만든다.
• POST 메소드를 통해 인자로 들어온 text를 백엔드서버에서 원하는 key & value type으로 전달!
• 받은 데이터는 data state에 담아준다!
• fetch가 제대로 되었는지 확인하기 위한 try & catch의 사용은 센스 🚨

Render

FlatList

• state에 담긴 데이터 중, 내가 필요한 부분만 꺼내서 FlatList를 통해 렌더!
• 필자가 작성한 부분은 상품에 대한 검색이기에 렌더부분에서 해당 상품으로 이동하기 위해 navigate를 통한 stack 설정, props로 상품의 id값을 넘겨주고 있는 모습이다.

취소버튼

만들다 보니까 갑자기 취소버튼도 그냥 만들어보자라는 생각이 들어버린 것...

구성

• Placeholder에 아이콘 넣는 법을 몰라서 새로 태그를 생성했습니다(더 좋은 방법이 있을 것 같은데, 제보 부탁드립니다 🙏)
• 취소버튼도 생성! 애니메이션 적용을 위해 react-native-animatable 이라는 라이브러리를 사용했습니다.

• 임의로 만든 아이콘, 취소버튼, 그리고 취소버튼의 생성과함께 TextInput의 크기를 조정하기 위해 모두 touch라는 속성을 부여하고 같은 state를 가지도록 했다.
• 취소버튼을 누르면 TextInput의 입력된 값을 초기화 시키기 위해 ref를 설정했다.

Function

UI 설정

• 리액트스럽게 만들어보자! 아까 만들어둔 fetch함수는 입력값을 인자로 받도록 이미 설정 되어있으니, 이 곳에 살짝쿵 setState를 얹었다.
• 이제 취소버튼 & TextInput & 아이콘 모두 touch에 searchVal이라는 상태값을 가지게 되었다.

• 텍스트가 지워지면 원래대로 UI가 돌아와야하기 때문에, touch의 길이를 이용했다.
• TextInput은 width, 아이콘은 z-index, 취소버튼은 display를 삼항연산자를 통해 조건부 렌더를 선언했다.

• 그냥은 밋밋하니까 취소버튼이 눌릴 때 애니메이션도 살짝 추가

데이터 값의 초기화

• 취소버튼에 onPress가 있을 경우 ref지정된 TextInput의 입력값이 clear되도록 메소드를 설정(아주 고맙다.. 메소드가 있다니..!)
• UI의 복구를 위해 searchVal의 state를 초기화!
• 입력값이 없으니 렌더할 아이템도 지워져야된다 data의 state도 초기화!

• 그냥은 밋밋하니까 취소버튼이 눌릴 때 애니메이션도 살짝 추가archVal의 state를 비워주었다.

Result

이게 또 만들어 지내..?
오늘도 하나 했다..!!🎉