검색창 2 [리액트] 검색의 목적은 편리함에 있다 ( 초성 검색, 자동완성) 들어가며가끔 OTP 서비스를 사용하다 보면 한글 초성으로만 검색하는 기능을 확인할 수 있습니다.입력이 불편한 리모컨 특성상 사용자에게 편리함을 제공하기 위해 많이 사용합니다.그래서 이번엔 초성으로도 검색 가능한 검색창 컴포넌트를 만들어보도록 하겠습니다.기존 컴포넌트 & 로직컴포넌트우선 컴포넌트를 하나 보고 오겠습니다.이건 제가 예전에 사이트 프로젝트하면서 만들었던 컴포넌트인데요. 보시다시피 주식명 또는 코드를 입력하면 찾아주는 컴포넌트입니다. 근데 만약 여기서 삼성전자 대신에 ㅅㅅㅈㅈ를 입력했을때도 삼성전자가 검색된다면 얼마나 좋을까요?그래서 한번 만들어가보겠습니다.로직일단 기존의 로직부터 확인하고 가겠습니다.const matchStock = ( stockList: Holdings[], query: .. 2022. 7. 10. [리액트] 특정 문자열만 색상을 바꿔서 랜더링해보자(feat.검색창) 이번 포스트에서는 검색 컴포넌트에서 매칭되는 문자열만 색상을 칠하는 방법에 대해 한번 알아보겠습니다. 이 기능은 보시다시피 검색창에 있어선 나름 필수적인 기능이라고 생각합니다. 저는 안드로이드 개발할때 같은 기능을 만들어 본 경험을 있으니 이번에도 같은 방식으로 구현해보도록 하겠습니다. [안드로이드]recycleview item의 특정 텍스트 색상 변경 개선 요청 사항 : 검색창의 결과를 좀 더 직관적으로 보고싶다. 매칭되는 검색어에 해당하는 텍스트의 색상을 바꿔달라. 보시다시피 recycleview의 item holder에서는 그냥 item의 정보를 가져와 all-dev-kang.tistory.com [ 결과 ] [구현 시작] 아이디어는 크게 2가지 방법을 생각해봤습니다. 특정 검색어(이하 쿼리)가 발.. 2021. 5. 14. 이전 1 다음
