Ref 란?

Ref 란?

• 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용

• 동일한 컴포넌트를 반복해 사용해도 각 컴포넌트 내부에서만 동작해서 중복되지 않음

• DOM을 직접적으로 건드려야 할 때 사용

 

Ref 사용하기 - 클래스 형 컴포넌트 

 

1. 콜백함수를 사용한 방법	- 사용하고자 하는 DOM 요소에 ref 라는 콜백 함수 작성 및 props로 전달 - ref 를 컴포넌트의 멤버 변수로 설정하는데, 이때 ref는 원하는 대로 사용 가능 - 한마디로 ref의 명칭은 아무거나 해도 인식함 - this라는 내부 공간에 주소값을 담는 공간을 만드는 식이라고 생각하면 될듯.
2. 내장함수createRef	- React.createRef 함수를 이용해 컴포넌트 내부에서 변수에 ref 요소를 담아준다. - 이때만든 input요소는 실제 DOM 요소의 prop 에 연결해야 한다. - 사용할 때는 this.input.current 를 이용한다

 

 

 

---

 

Ref 사용하기 - 함수 형 컴포넌트 

useRef()

• 함수형 컴포넌트에서 ref를 사용하기 쉽게 만들어주는 Hook

• useRef() 는 인자로 받은 값으로 초기화된 변경 가능한 ref 객체를 반환함

• ref.current 로 현재 가리키는 객체에 접근할 수있다.

 

useRef()의 사용 방법 2가지

1. DOM 요소에접근	- 가장 기본적인 html 태그에 ref라는 속성을 사용해서 useref로 생성한 ref를 추가시키면 됨. - document.querySelector()와 비슷하다고 보면 됨.
2. 로컬변수로사용	렌더링 되어 내용을 유지하고 싶다면 사용해도 됨.