useRef

함수형 컴포넌트에서 useRef 를 사용하면 ref 오브젝트를 반환해준다. 

const ref = useRef(value)  
// {current: value}

반환된 오브젝트는 컴포넌트의 생애주기를 통해 유지가 된다. 

그말은 컴포넌트가 계속 렌더링 되어도  컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있다는 것이다. 

 

그럼 useRef는  언제 사용할까?

 

1. useRef 는 state와 비슷하게 어떠한 값을 저장해두는 저장공간의 용도로써 사용된다. 

state의 경우  state값이 바뀌면 -> 렌더링을 하고 -> 컴포넌트 내부 변수를 초기화 한다. 

state를 사용할때 우리는 원치않는 렌더링 떄문에 곤란해 질떄가 있다. 

이떄 useRef를 사용하면 불필요한 렌더링를 막을 수있다. 

Ref의 값이 변경되도 렌더링이 일어나지 않기 때문에 변수들의 값이 유지된다. 

변경시 렌더링을 발생시키지 말아야하는 값을 다룰떄 편리하다 

 

2. DOM요소에 접근이 가능하다. 

예를들어 input 요소를 굳이 클릭하지 않고 focus를 주고 싶을때 사용할 수있다. 

만약, 로그인 화면창에 갔을때 인풋창을 클릭하지 않더라도 자동적으로 아이디칸에 포커스가 되어있다면 더 좋은 사용자 경험을 제공할 수 있다.