[React] Forwarding Refs 로 refs 전달하기

[React] Forwarding Refs 로 refs 전달하기

React.forwardRef 사용법

---

이전 포스팅에서 알아본 것 처럼, 상위 컴포넌트에서 자손 컴포넌트의 DOM을 컨트롤하기 위해 ref를 전달하는 방법엔 여러가지가 있다.

그 중, React 16.3 이후 버전일 경우 사용할 수 있는 React.forwardRef에 대해 알아보려고 한다.

 

* ref의 기본 사용방법을 알아보려면 이전 포스팅을 참고

[React] React.createRef() 에 대한 정리

 

---

React.forwardRef 사용 방법

FancyButton 은 React.forwardRef를 사용하여 전달된 ref를 얻고,

렌더링 되는 DOM button을 ref로 전달합니다.

 

원래 함수형 컴포넌트 인스턴스에는 ref를 할당할 수 없었지만, React.forwardRef를 사용하게 되면, 렌더링 되는 DOM node를 ref에 할당 가능하게 된다(클래스형 컴포넌트에 ref를 할당한 것과 비슷)

 

React.forwardRef 동작 과정

1. React.createRef() 를 통해 ref 객체를 생성하고 buttonRef 변수에 할당
2. ref를 JSX 속성으로 지정하여 <FancyButton ref={ref} /> 로 전달
3. React는 이 ref를 forwardRef 내부의 (props, ref) => ... 함수의 두 번째 인자로 전달
4. 이 ref를 JSX 속성으로 지정해서 <button ref={ref} /> 로 전달
5. ref가 첨부되면 ref.current 는 <button> DOM 노드를 가리키게 된다.

 

반응형

 

HOC (고차원 컴포넌트)에서 ref 전달하기

예시로 만든 "logProps" HOC는 모든 props를 wrapping하는 컴포넌트로 전달하므로 렌더링 된 결과가 동일하게 된다.

이 HOC를 사용하여 "FancyButton" 컴포넌트로 전달하는 모든 props를 기록 할 수 있다.

 

하지만 주의해야 할 점은 ref는 prop이 아니기 때문에 전달되지 않는다는 점이다. 

(React에서 key 속성을 처리하는 것처럼 ref 또한 다르게 처리한다)

 

위 예제처럼 React.forwardRef API를 사용하여 FancyButton 컴포넌트에 대한 ref를 명시적으로 전달할 수 있다.

 

---

 

이 포스팅은 React 공식 문서(Forwarding Refs)을 기반으로 작성하였습니다.

https://ko.reactjs.org/docs/forwarding-refs

Forwarding Refs – React