React - useRef

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 

즉 참조를 뜻한다.

 

useRef는 두가지 상황에서 유용하다.

1. 어떠한 값을 저장할때 저장공간으로 사용된다.

State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화

State가 변화하면 렌더링이되고, 리렌더링이 되면 컴포넌트의 내부 변수들은 초기화 된다.

State와 달리 Ref를 사용하게되면 Ref값이 변화해도 렌더링을 하지않는다. 이는 변수들의 값이 유지된다.

변경시 렌더링을 발생시키지 말아야할 값을 다룰때 Ref를 사용하면 좋다.

2. DOM 요소에 접근할때 사용한다.

예를 들어, 로그인을 할려면 Input text란을 클릭해야한다.

ref를 사용한다면 클릭을 하지않아도 자동으로 focus가 된다.

초깃값은 0으로 두고 증가 버튼을 누를때마다 1씩 증가하는 로직을 구현하였다.

리액트에서 State가 변화한다는것은 다시 렌더링 된다는것이다.

이는 Count가 1씩 올라갈때마다 3~16번째 로직이 다시 실행된다는것이다.

여기에 useRef를 추가해보았다.

ref안에는 current값을 갖고있고 초깃값인 0이다. ref안에 접근하려면 countRef.current 이런식으로 접근해야한다.

Ref증가 버튼을 만들어주었다.

현재 보이는 화면은 State증가 버튼을 3번, Ref증가 버튼을 3번 클릭했을때이다.

CountRef는 내부적으로는 증가하고있지만, 렌더링은 되고있지 않다.

그래서 아무리 증가해도 화면에는 변화하지 않는것으로 보인다.

이상태에서 State증가 버튼을 클릭하게되면,

Count가 4, Ref가 아까 눌렀던만큼 증가해있는걸 볼수있다. 이는 State는 클릭할때마다 렌더링되기때문에

아까 ref가 렌더링되지않았던 부분들이 한번에 보이는것이다.

이를 좀더 보기 쉽게할려면 console을 IncreaseRef안에 찍어보면된다.

여기서 ref의 장점은 불필요한 렌더링을 줄여줄 수 있다는 것이다.

위에 말했던거처럼 useRef를 사용했을때 클릭을해도 렌더링은 되지않기때문에 화면상의 변화는 없지만

콘솔창에는 나오는 모습이다. 이를 화면상에서도 보이게하기위해 State를 추가해보겠다.

위 두 사진을 보면 Var값은 계속 0이고, Ref값은 클릭한 만큼인 2값을 보여준다.

둘이 다른이유는 Var값은 렌더링 될때마다 계속 0으로 초기화 되기 때문이다.

이제 내가 총 몇번 렌더링했는지 확인해볼 것이다.

useEffect를 사용해서 렌더링될때마다의 갯수를 확인할려했더니 콘솔창에 무한루프에 빠진것을 확인할 수 있었다..

이를 해결하고자 useRef를 사용했고, 값이 변할때마다 렌더링이 되지않기때문에 콘솔창에서 클릭할때마다 1씩 증가하는게 전부 나타났다.

 

정리하자면, 값은 변화해야하지만 렌더링을 발생시키고싶지않을때 useRef를 사용하면 좋을 것이라고 생각했다.