[React] ref사용하기

일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다.

[출처 : React]

---

ref는 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우, 그리고 어떤 일이 일어나게 할 때 사용될 수 있다. 일반적으로 useRef를 사용하는 방법은 1)ref를 생성하고 2)요소에 ref를 적용하고 3)ref에 원하는 메서드를 적용한다. 정도가 되겠다. 

 

 

가장 일반적인 사용법이 있다. 만약에 사용자가 로그인 페이지에  들어왔다고 했을 때, 로그인을 입력하는 란에 focused가 되기를 원할 때, ref를 사용할 수 있다. 조금 더 정확하게 말하자면 로그인 페이지의 모든 돔요소들이 다 마운트가 되었을 때, 그 순간에만 인풋에 focused가 되기를 원한다. 

 

useRef를 사용하는 방법 

1)useRef를 react로부터 import해온다. 

import {useRef} from 'react'

2)useRef변수를 선언해준다. 

const inputRef = useRef(null)

3)선언한 useRef변수를 적용할 돔 요소에 넣는다. 

<input ref={inputRef} type='text />

 

4)useRef에 효과를 넣는다. 

useEffect(()=> {
	inputRef.current.focus() //current는 리액트에서 제공하는 메서드이다
},[])