사용법
const ref = useRef(value);
consloe.log(ref); // {current: value}함수형 컴포넌트에서 useRef를 호출하면 객체를 반환. 객체에는 인자로 넣어준 초기값을 값으로 하는 current프로퍼티가 있음.
ref오브젝트는 수정이 가능해 값을 바꿀 수 있음. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 됨. 즉, 컴포넌트가 계속해서 렌더링돼도 컴포넌트가 언마운트 될 때까지는 값을 유지.
사용목적
1. 저장공간
state와 비슷하게 저장공간으로 사용됨. state가 변경되면 렌더링이 발생하지만 ref는 렌더링이 발생하지 않는 차이가 있음. 함수컴포넌트는 함수기 때문에 렌더링되면 함수 내부 변수들이 초기화되지만 ref는 값을 유지함. 또한 state변경으로 렌더링이 발생하더라도 ref의 값이 유지됨. 따라서 변경시 렌더링을 발생시키지 않아야 할 값을 다룰때 유용함.
2. DOM요소 접근
ref를 사용해 DOM요소에 접근해 여러가지 작업을 할 수 있음. 대표적으로 로그인화면에서 id input에 클릭하지 않아도 커서가 가있게 할 때 사용됨. 바닐라 JS의 Document.querySelector()와 비슷함.
변수관리(저장공간)
위코드에서 state는 변동될 때마다 렌더링을 발생시키지만, ref는 변동되어도 렌더링을 발생시키지 않음. 자주 바뀌지만 렌더링될 필요가 없는 값을 ref로 지정해 성능 최적화를 위해 활용가능함.
.png)
위는 ref와 일반변수의 차이점이 드러나는 코드. ref와 변수를 모두 변경시킨 후 리렌더링을 발생하면 변수로 선언한 것은 재선언이 되면서 값이 초기화되지만, ref는 이전 값을 유지하는 특성이 있음.
위 코드처럼 useEffect 내부에 setState가 포함되면 무한루프가 발생함. 이럴 경우 useRef를 사용해 무한루프를 방지할 수 있음.
useRef는 렌더링을 발생시키지 않기 때문에, 변화는 감지해야하지만 렌더링을 피해야할 때 사용할 수 있음.
DOM요소 접근
useRef를 호출하면 오브젝트를 반환하는데, 이를 접근하고자 하는 요소에 ref속성으로 넣어주면 해당요소에 접근가능함.
useRef를 호출한 결과를 변수에 저장하고, 해당 변수를 엘리먼트의 ref의 속성값으로 지정하면 요소가 current에 지정됨. focus메서드를 통해서 화면이동 시 자동으로 포커스되게 할 수 있음.
value프로퍼티로 값에도 접근이 가능.
useEffect외에도 로직 시행 후 focus메서드를 활용해 커서가 돌아오도록 할 수도 있음.
