(React) useRef : 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 사용

useRef 유스 케이스

1. 변수 관리 : 렌더링과는 무관하게 변수를 관리해야 하는 경우

const initailValue = useRef(0)

//useRef는 current 객체를 가진다.
console.log(initail.current)

 

useRef는 객체이고

current라는 키에 useRef의 값을 담고 있다.  

 

let, const 키워드로 선언된 값은 컴포넌트가 렌더링되면  초기값으로 변하게 된다. 

 

컴포넌트의 생명주기와는 무관하게 관리되어야 할 값들이 let, const에 담기게 된다면

렌더링이 발생하는 순간 그 값들은 초기값으로 변하게 되어 누적 관리된 값들이 사라지게 된다.

 

이런 문제를 방지하기 위해 useRef를 사용하면 렌더링과는 무관하게 변수를 관리할 수 있다.

 

2. DOM 접근 : 렌더링 후 자동 focus

const ref = useRef(value);

input.current.focus(); //렌더링되면 input 요소에 자동으로 focus
input.current.value //input 태그에 입력되어 있는 값

<input ref={ref} />

 

useRef를 DOM 요소의 속성으로 넣어주면 요소에 쉽게 접근하여 조작할 수 있다.

 

import { useRef } from 'react'

const addTodo (newTodo) => {
	setNewTodo([...setNewTodo, newTodo])
}

const inputRef = useRef();

const addTodoData = (e) => {
	addTodo(inputRef.curren.value);
}
return 
	<input ref={inputRef} onClick={addTodoData}/> 
    //onChage를 쓸 필요없이 useRef로 input value 변수를 관리할 수 있다.