일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- this 객체
- DOM
- 리액트
- CSS
- 비동기함수
- 배열
- useRef
- frontendstudy
- promise
- JavaScript
- addEventListener
- Frontend Study
- 함수 실행
- input
- 메소드 실행
- HTML
- webProject
- 렌더링
- try.. catch
- 자바스크립트
- typeScript
- 이벤트핸들링
- 컴포넌트
- callback함수
- 배열메소드
- Props
- 이벤트
- FrontendStydy
- REACT
- useState
- Today
- Total
목록useRef (2)
이다닷
📌저번시간에 useRef를 배울때 컴포넌트에서 특정 DOM을 선택해야할 때, ref를 사용한다고 했다. 그 이외에도 ref의 사용법은 있다. 바로, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다. App.js 변경 import React from 'react'; import UserList from './qoffhvjxm/UserList'; function App() { const users = [ { id: 1, username: 'dndhk', email: 'dndhk@gmail.com' }, { id: 2, username: 'Lee', email: 'Lee@gmail.com' }, { id: 3, username: 'dada', email: 'dada@gmail.com' } ];..
📌useRef란? 리액트를 사용하는 프로젝트에서도 가끔 직접 DOM을 선택해야하는 상황이 발생 할 때가 있다. 그리고 video.js, JWPlayer 같은 HTML5 Video 관련 라이브러, 또는 chart.js 같은 그래프 관련 라이브러 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에 적용하기 DOM을 선택해 하는 상황이 발생할 수도 있다. => 그럴때 Ref라는 것을 사용한다! 초기 파일은 저번 시간에 완성한 MultiInput.js를 사용한다. ➡️우리가 저번 시간에 만들었던 내용은 초기화 버튼을 누르고나면 포커스가 초기화 버튼에 그대로 남아있게 된다. 우리는 Ref를 이용해서 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히게 하겠다. UseRef.js import React..