타입스크립트 17 [리액트] HOC 컴포넌트를 만들어보자 #1 (feat.타입스크립트) 다음과 같은 컴포넌트가 있습니다. SELECT 버튼을 클릭하면 포트폴리오 적용중...이라는 텍스트와 함께 원형 로딩바가 돌고 일정 시간 후에 랜더링 되는 컴포넌트입니다. 저는 이 컴포넌트를 이런식으로 구성했습니다. const [loading, setLoading] = React.useState(false); const handleSelectedPF = (portfolio: RRSW) => { setLoading(true); onChangeSelectedPF(portfolio); timer.current = window.setTimeout(() => { setLoading(false); }, 500); }; return ( {!loading ? ( ) : ( )} ) 코드는 필요한 부분만 가져와 간략화하였.. 2021. 6. 14. [리액트] 특정 문자열만 색상을 바꿔서 랜더링해보자(feat.검색창) 이번 포스트에서는 검색 컴포넌트에서 매칭되는 문자열만 색상을 칠하는 방법에 대해 한번 알아보겠습니다. 이 기능은 보시다시피 검색창에 있어선 나름 필수적인 기능이라고 생각합니다. 저는 안드로이드 개발할때 같은 기능을 만들어 본 경험을 있으니 이번에도 같은 방식으로 구현해보도록 하겠습니다. [안드로이드]recycleview item의 특정 텍스트 색상 변경 개선 요청 사항 : 검색창의 결과를 좀 더 직관적으로 보고싶다. 매칭되는 검색어에 해당하는 텍스트의 색상을 바꿔달라. 보시다시피 recycleview의 item holder에서는 그냥 item의 정보를 가져와 all-dev-kang.tistory.com [ 결과 ] [구현 시작] 아이디어는 크게 2가지 방법을 생각해봤습니다. 특정 검색어(이하 쿼리)가 발.. 2021. 5. 14. [리액트] 부드럽게 이동하는 숫자 컴포넌트를 구현하는 방법(feat.타입스크립트) 사이드 프로젝트를 진행하면서 다른 웹페이지를 많이 보고 공부하고 있습니다. 그러던 와중에 로빈후드의 주가 차트 창에서 숫자가 미끄러지며 나타나는 기능을 봤는데 매우 역동적이고 멋져 보여서 한번 구현해볼까 생각하게 되었습니다. 계속 찾아보니 JQuery로 구현하는 방법은 많이 있습니다. 그리고 간단하기도 했습니다. 하지만 저는 JQuery는 안쓰자는 주의라(실은 제대로 공부해본 적이 없어서 가져다 쓰기가..) 순수 JS나 CSS로 구현된 것이 있나 살펴보았지만 딱 로빈후드만큼 역동적으로 지원하는 코드는 없어서 한번 구현해보기로 했습니다. 단순히 숫자가 올라가는 코드의 경우 해당 숫자 영역을 잡고 JS코드로 빠르게 숫자를 올려주면 되는 것이지만 저건 스크롤하듯 올라가거나 내려가야 해서 고민했습니다. 구현 시.. 2021. 5. 13. [리액트] 특정 엘리먼트에 focus 주는 방법에 대하여(feat.타입스크립트) 들어가며 특정 버튼을 눌렀을때 입력창이 뜨고 텍스트를 입력합니다. 근데 텍스트 입력이 안됩니다. 귀찮게 마우스로 입력창을 누르고 다시 키보드로 옮기는 과정이 필요합니다. 매우 귀찮죠. 그럴때 필요한 기능이 바로 리액트 컴포턴트에 focus를 주는 것입니다. 이번 글에서는 바로 이 기능에 대한 간단한 구현과 예시를 살펴보겠습니다. 자바스크립트에서의 Focus 일단 리액트의 focus를 들어가기 전에 HTML의 focus에 대해 간단히 살펴보겠습니다. 기본 사용법 HTMLElement.focus() - Web APIs | MDN The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused.. 2021. 5. 10. 이전 1 2 3 4 5 다음
