[React]useRef

박성수·2022년 10월 23일
0
post-thumbnail

useRef는 변경된 값을 저장한다는 점에서 useState와 비슷하다.

useState는 변경될 때 마다 페이지를 렌더링하며 값을 최신화하지만, useRef는 동작을 해도 값을 변경시키기만 할 뿐, 페이지를 렌더링하지않는다.

const refContainer = useRef(initialValue);

다음과 같이 선언한다.

선언된 refContainer는 다음과 같은 객체를 반환한다.

반환된 ref는 컴포넌츠 전 생애주기를 통해 유지된다. 컴포넌츠가 계속 렌더링 되어도 값을 그대로 유지한다.

값을 저장해야하지만 불필요한 컴포넌츠를 막고 싶을 때 사용한다.

{current : initialValue}

예시) 버튼을 클릭하면 ref의 값을 1씩 증가시킬 때

function Count(){
	const ref = useRef(0);
	function clickButton(){
		ref.current = ref.current +1
}
return(
<>
	<button onClick={clickButton}>클릭시 ref 1 증가</button>
</>
)
}

useRef는 DOM요소에 접근하기 위해서도 사용된다.

ref속성에 useRef로 선언된 변수를 넣어주기만 하면 해당DOM에 직접 접근할 수 있다.

다음은 페이지가 처음 렌더될 때 인풋창을 자동으로 focus해 주는 로직이다.

const inputRef = useRef();

useEffect(()=>{
	inputRef.current.focus();
}, []);

return (
	<>
		<input ref={inputRef} type="text" placeholder="username"/>
		<button>Click</button>
	</>
}
};

input창의 ref속성으로 inputRef를 지정해주었다.

이후 useEffect를 사용해서 inputRef.current.focus()를 해주었는데, inputRef를 input의 ref로 지정해주었고, useRef는 값을 객체안의 current에 저장하기 때문에 inputRef.current가 직접적인 Dom의 요소가 된다.

profile
Front-end Developer

0개의 댓글