useRef2 [React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number) const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 - 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다. - 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으로 html엘리먼트(in.. 2022. 8. 11. [React] useRef로 DOM 취득시, null | undefined 되는 이유와 해결방법 # useRef : DOM 취득시 null이 되는 이유 useRef로 DOM을 취득시, 사용 시점에 따라 null 이나 undefined가 될 수 있다. 예를 들어 아래 코드는 작동하지 않는다. import React, { useEffect, useRef } from 'react'; import './App.css'; function App() { // useRef 사용 const inputRef = useRef(null); // 최초 실행시 input에 focus 주기: 실패한다. inputRef.current.focus(); console.log(inputRef.current); // null 이 찍힌다. return ( {/* input 을 useRef로 참조 */} ); } export defau.. 2022. 8. 9. 이전 1 다음