[ReactJS] useRef vs useState vs 전역변수

[ReactJS] useState vs useRef vs 전역변수

---

개요

  프로젝트를 진행하는 도중 useRef와 전역변수의 차이에 대한 궁금증이 생겨 이를 알아보고, 부가적으로 useRef와 useState의 차이에 대하여 알아본다.

 

목차

• useRef vs useState
• useRef vs 전역 변수

 

소개

 1. useRef vs useState 

 

useRef란?

 

  useRef는 .current property로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환해주는 Hook 함수이다. 이 때 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지되며, 정의하자면 useRef란, .current property에 변경 가능한 값을 담고 있어 특정 DOM을 가리킬 때 사용 할 수 있는 Hook 함수라고 할 수 있다.

 

useState란?

 

  useState는 함수 component 안에서 사용 할 수 있는, 변수의 상태를 관리 할 수 있는 Hook 함수이다. 이는 기존에 함수 component에서 상태를 관리 하지 못하는 문제를 해결 해주며 초기값으로는 [변수명과 변수를 갱신하는 함수 이름] , 인자로는 초기값을 입력해준다.

 

두 Hook의 목적성

 

  사실 useState와, useRef는 목적이 다른 Hook 이기 때문에 사실 두 Hook 함수를 비교하는 것은 의미가 없을 수도 있다.

useState는
- 변수의 상태를 관리

useRef는
- 포커스, 텍스트 선택영역, 미디어 재생관리
- 애니메이션을 직접적으로 실행시킬 때
- 서드 파티 DOM 라이브러리를 React와 함께 사용 할 때

 

위와 같이 두 Hook의 목적성부터 분명한 차이가 존재한다.  그럼에도 이와 같은 차이 뿐 아니라 둘의 또 다른 차이는 아래에서 확인 할 수 있다.

 

Rerendering(리랜더링)의 발생 여부

 

See the Pen Untitled by 이성준 (@castlejun-2) on CodePen.

 

  React에서 useState로 생성한 변수가 아닌이상, 변수의 값 변경은 컴포넌트의 ReRendering을 발생시키지 않는다. 위의 예제를 통해 살펴 볼 수 있듯, useState를 사용한 변수를 증가시키면 값이 변경됨에 따라 ReRendering 되어 즉시 값이 변경됨을 확인 할 수 있다. 반면 useRef를 사용한 변수는 값을 증가시켜 변경되어도 ReRendering이 일어나지 않고, 변수의 값을 저장하고 있다가 useState를 통해 페이지가 ReRendering 될 때 변경된 값을 확인 할 수 있음을 알 수 있다.

  

 2. useRef vs 전역 변수 

 

프로젝트를 진행하던 도중, 아래와 같은 의문이 들었다.

그렇다면 전역변수로 사용되어 선언되는 변수와 useRef를 통해 사용되는 변수의 차이는 무엇일까?

 

실제, useRef로 선언한 변수와, 함수형 Component의 바깥에 선언한 변수 모두 Component의 Rerendering을 발생시키지 않는다. 또한 함수내에서 접근하여 값의 수정또한 가능하다. 따라서 함수 자체로만 본다면 큰 문제가 발생하지 않을 수 있다.

 

하지만 Component들이 여러번 선언되어 재사용 된다면?

 

React에서 Component가 갖는 가장 큰 장점은 재사용성이다. 따라서 실제 Component들은 여러번 재사용 될 수 있다. 이 때 위에서 언급된 전역 변수를 선언하여 사용될 때의 문제를 발견 할 수 있게된다.

 

 

전역변수를 Component 끼리 공유

 

 

  useState와 useRef는 컴포넌트와 생애주기를 함께한다. 따라서 Component가 생성됨과 동시에 값이 초기화 되고, 컴포넌트가 UnMount 되면 메모리에서 해제된다. 하지만 이처럼 전역 변수를 공유하게 된다면 컴포넌트가 등장하였다가 사라지게 되더라도, 다시 등장한다면 공유된 전역변수의 값이 유지된다. 위의 예제처럼, 각 Component들이 재사용 될 때, useState와 useRef로 선언된 변수는 Component에 독립된다. 하지만, 전역변수는 값이 서로 공유되어 다른 appName의 Component에서 증가시킨 것임에도 불구하고, 값이 공유되어 ReRendering 될 때, 해당 값으로 변경됨을 발견 할 수 있게 된다. 이를 잘 이해하고 활용한다면, 모든 컴포넌트가 하나의 변수를 바라보고 공유함을 이용해 유용하게 쓸 수도 있다.

 

끝으로, 이번 포스팅을 통해 React의 공식문서를 참고하고 다양한 글을 접하면서 조금 더 이해한 상태로 프로젝트를 진행 할 수 있게 되어 개념 정리의 중요성을 한번 더 느낄 수 있게 되었다.

 

참고자료

1. https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React