useRef가 필요한 상황

useRef 특성

• 값이이 변경되어도 컴포넌트의 리렌더링이 없어 빠른 참조가 가능하다.
• ref를 사용하는 경우는 임의로 값을 변경하지 않는다면 값이 계속 유지된다.
• ref는 컴포넌트 라이프 사이클 내에서 유지가 되며, 변경이 가능한 변수이며, 값이 변할 때 렌더링이 되지 않는다.
• 부모 컴포넌트에서 자식 컴포넌트로 ref를 내려줄 때는 forwardRef를 활용하여야 한다.
• Ref는 간단히 말해 컴포넌트 라이프 사이클(마운트와 언마운트) 내에서 유지되는 변경이 가능한 변수이며, 변수가 변할 때 렌더링이 추가로 되지 않습니다.

state와 비교

State

• 컴포넌트 라이프 사이클 내에서 유지가 되며, 변경이 가능한 변수
• 값이 변할 때 렌더링이 다시 된다

ref

• 컴포넌트 라이플 사이클 내에서 유지가 되며, 변경이 가능한 변수
• 값이 변할 때 렌더링이 되지 않는다

useRef가 필요한 상황

• 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기에 주로 사용된다.

• 일반적으로 id 값, 인스턴스 값, scroll 위치와 같이 초기화되어 처음부터 넘버링 되지 않는 경우에 ref를 사용한다.

• ref는 주로 dom-element에 접근하여 컴포넌트 전체 렌더링과 관계 없는 작업을 할 때 유용하게 사용한다.

• 전체 컴포넌트를 렌더링 시키지 않고, dom에만 접근하여 내가 원하는 효과를 주는게 가능해 집니다.

• dom element에 접근하여 원하는 작업을 하였지만 컴포넌트 전체에 영향을 끼치지 않고, 원하는 작업을 할 수 있게 됩니다. 그래서 주로 focus나 텍스트를 선택할 때 주로 많이 사용하게 됩니다.