[React] Ref(React.createRef, ref attribute, useRef)

결, 꼬재랑 함께하는 레벨2 방학 스터디

 

Ref

• Ref는 render 메서드에서 생성된 DOM 노드나 React Element에 접근 하는 방법을 제공한다.
• Ref는 React.createRef()를 사용해 생성하고, 만든 Ref는 참조하려고 하는 노드의 ref attribute에 연결해 준다.
• Function Component는 인스턴스가 없기 때문에 Function Component에 ref attribute를 사용할 수 없다.
• 하지만 DOM element나 Class Component의 인스턴스에 접근하기 위해 ref attribute를 Function Component에서 사용하는 것은 된다.
• Ref는 컴포넌트 Life Cycle 내에서 유지되는 변경 가능한 변수이다.
• Ref는 State와 달리 값이 변경 되었을때 리렌더링이 되지 않는다.
• 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달 할때는 forwardRef를 사용해야 한다.

 

공식문서

 

부모 컴포넌트에서 자식 컴포넌트에 ref 전달

 

---

React.createRef(), ref attribute, useRef()가 어떤 값을 가지는지에 대해 간단하게 알아보겠습니다.

 

React.createRef()

 

 

 

ref attribute

 

 

ref는 current 프로퍼티 하나를 가진 객체이다.
DOM 노드에 연결 하면 해당 노드 객체가 current 값에 할당된다.

 

 

 

useRef(initialValue)

 

---

Ref 를 사용해야 하는 케이스는 무엇이 있을까요?

공식문서

공식문서에서는 다음과 같이 설명을 하고 있는데 쉽게 생각을 해보면 ref는 컴포넌트 Life Cycle 내에서 유지되는 변경 가능한 변수이며 값이 변경 되었을때 리렌더링 되지 않는다.

즉 ref를 사용하면 전체 컴포넌트를 리렌더링 시키지 않고 DOM에 접근하여 원하는 effect를 주는게 가능하다.

 

 

Ref 를 남용하면 안되는 이유는 무엇일까요?

React는 state를 가지는 컴포넌트들 간의 관계로 구성되어 있고 state를 props로 전달하여 컴포넌들 간의 소통이 가능하다. 하지만 ref를 사용하면 다른 컴포넌트들에 접근할수 있어 다음과 같은 상황을 고려해야 한다.

• ref는 데이터의 동기화를 보장하지 않는다.
• ref의 값을 변경하면 컴포넌들가 리렌더링 되지 않기 때문에 원하는 모습으로 구현이 되지 않는다.
• ref의 값을 변경하는 것은 side effect이므로 컴포넌트가 마운트 되고 난 후, useEffect 내에서 값을 변경 하거나 이벤트가 발생하는 event handler 안에서 값을 변경 해야 한다.

 

 

 

---

Refs and the DOM - React

Refs and the DOM – React

[React] 엘리먼트, 컴포넌트, 인스턴스 개념

[React] 엘리먼트, 컴포넌트, 인스턴스 개념