typescript1 [React, TypeScript] 브라우저 화면에서 특정 단어 검색 기능 구현 카톡방에서 '대화 내용 검색'기능과 유사한 기능을 React로 브라우저에서 구현했습니다. 보통은 브라우저에 표시된 화면에서 Ctrl(Command) + F 를 사용하면 됩니다. 그러나 특정 컴포넌트 내에서만 이 기능이 동작하도록 코드로 직접 구현했습니다. 1. 검색하고 싶은 단어가 포함된 Node를 HTML DOM으로 불러와 텍스트만 추출하기 검색하고 싶은 단어들이 포함된 Node를 HTML DOM으로 불러옵니다. DOM문법을 사용해도 되고 React를 사용하고 있다면 useRef를 통해 불러옵니다. 저의 경우 useRef를 통해 HTML DOM을 불러왔지만, 그 안에서 특정 클래스에 있는 텍스트만 추출했습니다. 그리고 검색된 키워드를 포함하는 엘리먼트만 배열에 담아 state에 저장해줍니다. const.. 2023. 4. 20. 이전 1 다음 반응형