[React] useRef의 장점 및 활용

 

React.js의 가장 큰 특징은 업데이트 반영, 즉 리렌더링이라고 생각한다.
이를 활용하기 위해 어떤 특정한 값의 변동을 반영할 때 상태 관리 hook인 useState를 주로 사용하게 된다.

 

그런데 React.js는 자바스크립트 문법을 사용하면서도 변수(ex. let count = 0 )를 사용하면 상태 관리에 애를 먹게 된다.
리렌더링 후 값이 초기화 되버리는 단점이 있기 때문인데

useState의 장점(값을 유지) 과 변수의 장점(렌더링 되지 않아 성능에 도움)을 합쳐둔 useRef가 있다.

 

각각의 hook을 비교하면서 장점과 활용법에 대해 포스팅하기로 했다.

---

* useState, 변수 , useRef 비교

 

UI 및 콘솔 로그

 

 

useState, 변수 , useRef를 비교하기 위해 버튼을 클릭하면 값을 증가시키는 UI를 만들었다.

 

1. useState로 설정한 값은 버튼을 클릭할 때 마다 리렌더링 되어 증가될 때마다 화면에 새롭게 반영이 된다.

2. 변수로 설정한 값은 증가되긴 하지만, 리렌더링 되는 순간 값이 초기화된다.

3. useRef로 설정한 값은 특이하게도 current라는 값을 가진 객체의 형태로 되어있다. 

 

코드 일부

 

 

 

* useRef 값 변경

 

ref 값 증가

 

1. useRef 설정값을 증가하기 위해 current를 증가하는 코드를 추가해주었다.

 

ref 값 증가 콘솔 확인

 

2. 코드 추가 후, 버튼을 클릭할 때 마다 current의 값이 증가되는 것을 확인할 수 있다.

 

state up 클릭 후 리렌더링 (ref 값 유지)

 

3. 리렌더링 후 증가된 useRef 값이 화면에 정상적으로 반영이 되었다.

 

---

 

* 결론

👍- useState를 사용하면 값이 변경되는 것을 리렌더링 하여 즉시 화면에 반영할 수 있다.

👎- 다만 성능에 과부하를 줄 수 있다. 그렇다고 성능 때문에 변수를 사용하면 변경되는 값을 리렌더링 후 유지할 수 없다.

 

그러므로 , useRef를 쓰면 성능도 효율적이고, 리렌더링 후 변경값을 유지 한다.

즉,값을 저장해야 하는 변수를 사용해야 할 때 활용하면 가장 좋다.

단, 화면에 보여지지 않는 정보일 경우에 한정된다.

(UI에 꼭 반영해야하는 정보라면 당연히 useState를 쓰되, 그렇지 않다면 성능을 위해 useRef를 쓰자는 것!)

 

 

유튜브 '코딩알려주는누나' 영상을 참고하여 작성하였고, 활용 예제는 동영상으로 확인하는 것이 좋을 것 같다.