useRef

1. useRef란

함수형 컴포넌트에서 useRef를 부르면 ref object를 반환해준다. 우리가 인자로 넣어준 초기값은 Ref 안에 있는 current에 저장이 된다. Ref object는 수정이 가능하기 때문에 언제든 우리가 원하는 값으로 바꿔줄 수 있다.

반환된 Ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 이는 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운트 되기 전까지는 값을 유지할 수 있다는 것이다.

const ref = useRef(value);

// 반환 값
{
  current: value;
}

// useRef 안의 값에 접근하는 방법
ref.current;

2. useRef는 언제 사용할까?

1) 저장공간

state와 비슷하게 어떤 값을 저장해두는 저장공간으로 사용이 된다. state를 변경하면 자동으로 컴포넌트가 렌더링이 되는데, 이때 컴포넌트 내부에 있는 모든 변수들이 전부 초기화되어 버린다. 그래서 가끔 원하지 않는 렌더링 때문에 곤란해질 때가 있다. 이때 state 대신 Ref 안에 값을 저장한다면 이를 해결할 수 있다. Ref는 값을 아무리 변경해도 컴포넌트가 다시 렌더링되지 않기 때문에 불필요한 렌더링을 막을 수 있다. 그래서 엄청 자주 바뀌는 값에는 Ref를 사용하면 성능 향상에도 좋다. 또한 컴포넌트가 아무리 렌더링 되어도 ref의 값이 유지된다는 특징이 있다. 그렇기 때문에 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 매우 유용하다.

2) DOM 요소에 접근

Ref를 통해 실제적으로 DOM 요소에 접근 해서 여러가지 일들을 할 수 있다. 대표적으로 input을 클릭하지 않아도 자동으로 focus 주고 싶을 때 많이 사용된다. Ref를 사용하면 손쉽게 input 요소에 접근해서 이런 작업을 할 수 있다. 마치 바닐라 자바스크립트의 Document.querySelector()와 같은 역할이라고 할 수 있다.

3. useRef 사용

1) useState와 useEffect와 useRef!

useEffect 안에 setState를 사용하면 무한루프에 빠지게 된다. 이 때 useRef를 사용하면 무한루프를 해결할 수 있다. 이렇게 useRef는 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 어떤 값을 다룰 때 정말 편리하다.

2) DOM에 접근하기

useRef를 사용하면 input 박스에 포커싱을 할 수 있다. 위의 코드를 보면서 확인해보자.

inputRef로 useRef를 만들고, input에 ref 속성을 사용해서 input 박스와 useRef를 연결한다.

그리고 useEffect에 inputRef.current.focus()를 적고, 의존성 배열로 빈 배열을 넣으면 처음 화면이 렌더될 때 input박스에 포커싱 되는 것을 확인할 수 있다.

만약 로그인 후에도 input 박스에 포커싱되도록 하고 싶다면 onClick 함수를 만들어 inputRef.current.focus()를 넣어주면 된다.

실행 결과를 확인해보자!

---

본 글은 별코딩 영상을 보고 작성한 글입니다!