변수를 선언하는 것 대신 useRef()의 장점은 무엇인가요?
React Hooks를 사용할 때 useRef() 훅을 사용하는 이점을 이해하는 것은 매우 중요합니다. useRef() 훅은 DOM에 액세스하는 데 사용되는 것으로 잘 알려져 있지만, 함수형 컴포넌트에서 변경 가능한 값들을 관리하는 데에도 추가적인 이점을 제공합니다.
useRef()의 기본 원리
장점을 살펴보기 전에 useRef()가 무엇을 하는지 요약해 보겠습니다. React에서 useRef()를 사용하면 “current” 속성을 가진 평범한 자바스크립트 객체가 생성됩니다. 이 “current” 속성은 변경 가능한 값들을 저장하고 참조하는 데에 사용될 수 있습니다.
import React, { useRef } from "react";
const MyFunctionalComponent = (props) => {
const refVariable = useRef('value');
// ...
}위의 예제에서 “refVariable“은 useRef() 훅을 사용하여 “'value'“로 초기화된 변수입니다. 이 refVariable은 정규 변수인 “let“과 달리 리렌더링 사이에 계속해서 유지됩니다.
useRef() 사용의 장점들
1. 리렌더링 시 값의 유지
useRef()의 가장 기본적인 장점은 리렌더링 사이에서 값을 유지한다는 것입니다. 함수형 컴포넌트에서 리렌더링이 발생할 때마다 함수 전체가 실행됩니다. 함수 내부에서 “let“으로 변수를 선언하면 매번 다시 초기화됩니다. 그러나 useRef()를 통해 얻은 ref에 저장된 값은 리렌더링을 통해 계속해서 유지됩니다.
2. 불필요한 함수 실행 방지
함수형 컴포넌트에서 함수 내부에서 “let“으로 변수를 선언하면 해당 변수가 매번 다시 초기화되기 때문에 불필요한 함수 실행이 발생할 수 있습니다. 이는 성능을 저하시킬 수 있습니다. useRef()를 사용하여 값을 ref에 저장함으로써, 계산 또는 데이터의 재검색을 매번 리렌더링마다 실행할 필요 없이 방지할 수 있습니다.
3. DOM 액세스 이외의 용도로 사용 가능한 Ref
ref는 DOM에 액세스하는 데에만 사용되는 것이 아닌, 다양한 용도로 사용될 수 있습니다. useRef() 훅은 DOM 노드에 대한 참조뿐만 아니라 변경 가능한 모든 값을 저장하는 데에 사용될 수 있습니다. 이는 함수형 컴포넌트 내에서 상태를 유연하게 관리하는 데에 유용합니다.
4. 일관된 참조 객체
useRef() 훅을 사용하면 매번 동일한 ref 객체를 받게 됩니다. 이는 일관성을 보장하며, ref 객체의 “current” 속성을 사용하여 현재 값을 액세스할 수 있게 해줍니다. 이러한 안정성은 특히 다른 훅이나 함수에 의해 참조로 전달될 때 유용할 수 있습니다.
마무리
useRef() 훅은 함수형 컴포넌트에서 간단한 변수를 선언하는 것보다 여러 가지 장점을 제공합니다. 리렌더링 사이에서 값의 지속성을 유지하는 능력, 불필요한 함수 실행을 방지하는 기능, DOM 이외의 용도에 대한 지원, 일관된 참조 객체 제공 등은 React 개발에서 강력한 도구입니다. useRef()를 활용하여 성능을 최적화하고 애플리케이션에서 변경 가능한 값을 효율적으로 관리할 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
