반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- for in for of 차이점
- javascript cookie 얻기
- array method 요약
- vue scss 전역 설정
- input type="range"
- react input autofocus
- 로지텍 버티컬 마우스 사용 후기
- 로컬스토리지 객체 저장
- input range 컬러변경
- 검색창 autofocus
- vue scss
- next.config.mjs
- forEach map 차이
- javascript cookie 설정
- pip 명령 에러
- vscode 초기화
- 접근자 프로퍼티
- input range
- for in 문 예시
- for of 문 예시
- Object for in
- 객체 반복문
- javascript cookie 삭제
- 접근자 함수
- react 검색 기능 구현
- vue sass 사용하기
- vscode 재설치
- 로컬스토리지 쓰기 읽기 삭제
- setter 함수 동기적 실행
- 로지텍 MX Vertical 마우스
Archives
- Today
- Total
목록검색창 autofocus (1)
짬짬이기록하기
검색창에 autoFocus 추가
1. useRef 선언 import { useRef, useEffect } from 'react' const focusRef = useRef() 2. 해당하는 input에 ref 추가 3. 포커싱이 일어나야 하는 라이프사이클에서 focus() useEffect(()=> { if (searchClassName === 'search_input d-block') { focusRef.current.focus() } }, [searchClassName]) ==> 검색창 레이어가 뜨는 상황을 searchClassName 상태데이터로 (d-none, d-block) 제어했고, 상태데이터가 d-block일 때 포커싱이 되도록 처리했다.
Web Development/React
2024. 2. 7. 16:53