리액트를 사용하기 전까지 특정 태그에 접근할 때 document.getElementById()
를 사용했다.
하지만 리액트는 실제 DOM(Document Object Mode)이 아닌 virtual DOM(가상돔)을 다루기 때문에 위의 방법으로 접근했을 때 문제가 생길 수 있다.
리액트는 하나의 페이지를 가지는 SPA(Single Page App) 구조이다. 따라서 virtual DOM으로 여러 컴포넌트를 만들어 컴포넌트들의 조합을 진짜돔에 얹어서 보여준다.
이때 Ref
(reference 참조)를 이용해 태그를 변수에 저장하게 된다.
1. useRef 로 특정 DOM 선택하기
: input 요소를 클릭하지 않고 포커스(깜빡임)을 주고 싶을때 사용 할 수 있다.
2. 저장공간(변수관리)
: useRef를 State 대신 이용하면 불필요한 렌더링을 막을 수 있다.(렌더링 없이 변수값 유지 가능)
class형 컴포넌트에는 createRef()
메서드를 이용해 특정 태그에 접근한다.
//메서드 임폴트
import {createRef} from 'react'
// Ref코드 생성
inputRef = createRef()
// Ref를 적용하고싶은 input태그(=접근하고싶은 태그)
<input type="text" ref={this.inputRef}/>
//태그에 접근해서 실행시킬 함수
componentDidMout(){
console.log("마운트 됨")
this.inputRef.current?.focus()
}
함수형 컴포넌트에서는 **useRef**
훅을 이용해 특정 태그에 접근한다.
// 훅 임폴트
import {useRef} from 'react'
//Ref코드 생성
const inputRef = useRef()
// Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
<input type="text" ref={inputRef}/>
//태그에 접근해서 실행시킬 함수 _ useEffect참고는 바로 아래에서!
useEffect(()=>{
console.log("마운트 됨")
inputRef.current?.focus()
})