Ref 와 useRef 차이

 

Ref 

dom에 직접 접근할 때 사용됨

 

일반 html에서는 dom요소에 이름을 달 때 id를 사용해 식별하고 접근하는데

react에서는 ref 방식으로 접근한다.

 

id 사용을 권장하지 않는 이유

react에서 안에서 특수한 경우가 아니라면 id 사용을 권장하지 않음.

예를 들어 컴포넌트를 여러 번 사용한다고 html안에서는 id가 유일해야하는데

이런 상황에서는 중복 id를 가진 dom이 여러개 생기니 잘못된 사용입니다!

 

ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않습니다.

 

ref를 사용할 때는??

state로 해결할 수 없고 dom을 꼭 직접적으로 건드려야 할 때

아래와 같은 경우들

 

1. 특정 input에 포커스

2. 스크롤 박스 조작

3. 컨버스 요소에 그림 그리기 등

 

이때는 어쩔수 없이 dom에 직접적으로 접근 해야하는데  바로 ref 사용.

 

 

 

 

useRef는

함수형 컴포넌트에서 상태값을 관리하기 위해 사용됩니다. useRef는 렌더링과 관련이 없는 값을 저장하고, 이전 값과 다음 값이 같은 객체를 반환합니다. 또한 useRef를 사용하면 컴포넌트의 생명주기와 상관없이 참조값이 유지됩니다. useRef로 생성된 변수는 매번 렌더링이 발생할 때마다 생성되는 로컬 변수가 아니라, 전역 변수와 유사한 형태로 동작합니다.