useRef

함수형 컴포넌트에서 useRef를 부르면 Ref 오브젝트를 반환해준다.

const ref = useRef(value)

Ref 오브젝트는 { current: value }와 같은 형태이고 수정이 가능하다.

Ref에 접근하고 싶을 때 ref[변수명].current로 작성한다.

 

const ref = useRef('one') // { current: 'one' }

ref.current = 'two' // { current: 'two' }

ref.current = 'three' // { current: 'three' }

원하는 값으로 언제든지 변경이 가능하다.

 

반환된 ref는 컴포넌트의 전 생애주기에 의해 유지된다.

컴포넌트가 렌더링이 되어도 unmount가 되기 전까지 값을 그대로 유지할 수 있다.

컴포넌트가 브라우저에 mount되고 unmount될 때까지 같은 값을 유지할 수 있다.

 

그럼 이 useRef는 언제 사용해야 할까?

 

1. 어떠한 값을 저장하는 저장공간

(state와 비슷하다.)

•  state: 변경 > 컴포넌트 렌더링 > 함수가 다시 불려짐(내부 변수 초기화) : 원하지 않은 렌더링 발생
• Ref: 변경 > 컴포넌트 렌더링X(화면에 나타나지는 않음) > 변수 유지

컴포넌트가 아무리 렌더링 되어도 Ref의 값은 유지한다.

변경시에 값을 유지시켜야 할 때 편리하고, 자주 바뀌는 값을 넣고 사용하면 렌더링이 되지 않아 성능에 좋다.

 

Ref와 변수의 차이

let countLet = 0;

const increaselet = () => {
	countLet = countLet + 1;
};

이렇게 변수를 사용해도 되지 않을까? 하는 의문이 든다.

하지만 값을 저장이 될지라도, 화면에 표시하기 위해 렌더링이 되면 화면에는 나타나지 않는다. 그 이유는 렌더링이 될때 즉, 함수가 불릴때마다 변수가 초기화 되기 때문이다.

 

화면에 렌더링 발생 수를 출력하고 싶을 때는?

const [renderCount, setRenderCount] = useState(1);

useEffect(() => {
	setRenderCount(renderCount+1);
});

렌더링 개수를 세는 변수를 선언하고, useEffect에 인자값으로 콜백 함수만 전달하면 렌더링 할 때마다 시행되니까 useEffect 안에 setRenderCount 함수를 넣어서 갯수를 더해주다가는 큰일난다. 바로 무한루프에 빠지게 된다. 왜 무한 루프에 빠지게 될까?

 

바로 렌더링이 한번 일어난 순간, useEffect가 실행이 되어 setRenderCount가 실행이 되고 setRenderCount가 실행이 되면 state값이 변해서 다시 렌더링이 된다. 렌더링이 되면 useEffect가 실행이 다시 되고 이것을 무한 반복하게 된다.

 

이 때는 useRef를 사용하면 된다.

const renderCount = useRef(1);

useEffect(() => {
	renderCount.current = renderCount.current+1;
});

 

2. DOM 요소에 접근
(JS의 Document.querySelector()와 비슷하다.)

input에 자동적으로 포커스를 주어야 할 때 편리하다.

 

const inputRef = useRef();

<input ref={inputRef}>

속성으로 ref를 넣어주면 { current: input } 값이 반환된다.

input의 속성을 담고 있어 다양하게 활용이 가능하다.

 

inputRef.current.focus();

포커스가 되도록

inputRef.currnet.vlaue

값을 가져올 때