[설명] React useRef() Hook에 관련된 설명

React의 Hook과 관련하여 useRef()라는 제공함수가 존재합니다.

useRef()는 기본적으로 React의 DOM Object를 담도록 권장되는 Hook입니다.

특징은 내부의 값이 변경되어도 컴포넌트 리렌더링을 수행하지 않는다는 특징이 있습니다.

 

평소 React를 사용하여 프론트엔드 작업을 진행하시는 경우 해당 useRef() Hook을 활용하여 Object를 용이하게 접근하고 이를 제어하고 계실 것으로 생각됩니다. 하지만 한가지 더 중요한 사실은 useRef()의 용도가 한가지 더 존재하는데, 컴포넌트의 리렌더링에 관여하지 않는 컴포넌트에서 사용할 변수를 관리하는 용도입니다.

 

[활용방법]

1). DOM Object를 담아서 처리하는 용도

2). 컴포넌트 리렌더링 없이 사용할 내부 변수 선언

 

[활용설명]

1번)  React 내의 퍼포먼스를 극대화 하면서, 무거운 DOM 오브젝트를 담고, 이를 useEffect()에서 접근하여 처리를 진행할 수 있습니다.

2번) React 내의 퍼포먼스를 극대화 하면서, 컴포넌트 내의 리렌더링과 관계없이 전역에서 사용가능한 변수를 선어하여 사용이 가능합니다.

 

위 2가지 내용을 참조하여 리엑트내의 컴포넌트 리렌더링에 영향을 미치는 state가 아닌 별도의 컴포넌트 내부의 전체에서 사용이 가능한 전역 변수를 선언하여 조금 더 효과적인 코딩과 개발을 진행 할 수 있습니다.