Ref 전달하기

Ref 전달하기

Ref 전달하기 – React

Ref전달은 컴포넌트를 통해 자식 중 하나에 ref를 전달하는 기법입니다. 일반적으로 사용되지 않지만, 재사용이 가능한 컴포넌트에 유용할 수 있습니다.

DOM에 refs 전달하기

button, input등의 ref를 조작할 필요가 있을 수 있습니다. 이러한 경우에는

const FancyButton = React.forwardRef((props, ref) => (
	<button ref={ref} className="FancyButton">
		{props.children}
	</button>
));

const ref = React.creatRef();
<FancyButton ref={ref}>click me</FancyButton>

1. React.createRef 를 통해서 React ref를 생성하고 ref변수에 할당합니다.
2. ref={ref} 로 전달합니다.
3. props 내부에서 함수의 두번째 인자로 전달합니다.
4. 속성을 지정해서 <Button ref={ref}>로 전달합니다.
5. 이렇게 되면 ref.current 는 <Button>을 가르키게 됩니다.

단! ref인자는 정의한 경우에만 사용할 수 있습니다. 일반 함수나 컴포넌트의 경우 ref를 받지도 않고, 사용할 수 도 없습니다.

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

key와 마찬가지로 ref는 React에서 다르게 처리합니다. HOC에 ref를 추가하면 ref는 래핑 된 컴포넌트가 아닌 가장 바깥쪽 컨테이너 컴포넌트를 참조합니다.

하지만 React.forwardRef API를 사용하여 내부 컴포넌트에 ref를 선언을 통해 명시적으로 전달할 수 있습니다.

DevTools에 사용자 정의 이름 표시하기

React.forwardRef는 렌더링 함수를 받는데 이를 이용하여 전달 컴포넌트에 무엇을 표시할지 정의할 수 있습니다.

const WrappedComponent = React.forwrdRef((props, ref)=>return<Log forswardedRef={ref}>);

이때 익명함수가 아닌 렌더링 함수 이름을 지정할 수도 있습니다.

이러한 방법 말고도 displayName속성을 설정할 수도 있습니다.

function forwardRef((props, ref){ return <LogProps {...props} forwardRef={ref} />}

forwardRef.displayName = 'nameing'