중복클릭 방지 로직과 useRef

요가나라 작업중에 글쓰기 버튼을 여러번 눌렀을 때 여러번 게시글이 등록되는 중복 클릭이 발생되는 현상이 있었다. 프론트엔드 개발자분을 통해 버튼을 여러번 눌러도 한 번만 API가 호출될 수 있게 중복 클릭 방지 로직이 필요하단 것을 알았다. 하단 코드는 참고하라고 보내주신 코드다.

사용자의 동작으로(ex.버튼클릭) api를 호출할 경우에는 response가 올때 까지 중복호출을 방지해야 한다. isDoubleClick이 true(클릭된 상태)면 return하고, API가 호출되어 response가 오면 isDoubleClick을 false로 전환하여 중복 클릭을 방지한다.

isDoubleClick은 일종의 클릭을 감지하는 state인데 왜 useRef를 사용했을까에 대한 의문이 생겨 중복 클릭 방지에 사용된 useRef를 정리해보고자 한다.

useRef

사용법

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

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

우리가 초기에 저장해준 value라는 값이 current에 저장이 되는데 이 값들은 언제든지 변경할 수가 있다.

ref.current = 'hello' //{current: 'hello'}
ref.current = 'nice' // {current: 'nice'}

useRef는 컴포넌트의 전 생애주기에 걸쳐 유지된다. 즉 컴포넌트가 언마운트 되기 전까지 값을 계속 유지하게 된다. 그렇다면 이러한 useRef는 언제 사용하는 걸까?

사용되는 상황

1. 변화 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때

state는 변화할 때마다 렌더링이 되기 때문에 컴포넌트 내부 변수들이 초기화된다. 하지만 ref는 변화해도 렌더링이 되지 않기 때문에 변수들의 값이 유지된다. 또한 스테이트의 변경으로 컴포넌트가 렌더링되어도 ref값은 유지된다.

2. DOM 요소에 접근할 때

ref는 바닐라 js의 document.querySelector와 같은 역할을 수행할 수 있다.

변수와 Ref의 차이점

state와 ref는 값의 변화에 따른 렌더링 발생 유무와 값 저장에서 차이점이 있었다. 변수와 ref의 차이점은 컴포넌트가 렌더링 될 때마다 변수는 초기화되지만, ref는 컴포넌트의 전 생애주기에 거쳐 마지막으로 업데이트된 값을 그대로 유지한다.

결론

중복 클릭 방지에서 state를 사용했다면 사용자가 버튼을 반복해서 클릭했을 때 계속해서 렌더링되는 상황이 발생할 수 있고 이 경우 성능에 안 좋은 영향을 미칠 것이다.

결론적으로 useRef는 중복 클릭 방지처럼 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키지 말아야 하는 값을 다룰 때 사용된다.