부모 컴포넌트에서 자식 컴포넌트의 ref에 접근하는 법

앞서 react 기본 시리즈에서 살펴봤던 useRef()의 기능을 조금 더 구체적으로 파해쳐보자. 이 포스트를 읽기전 한번 위의 포스트에 다녀오는 것을 권장한다.

모든 react 컴포넌트는 reference의 앞글자를 딴 ref 속성을 제공한다. 그런데 ref 속성값은 개발자가 직접적으로 ref값을 설정하거나 조작하는 것이 아닌 어떤 시점에 react 내부에서 설정해주는 개념이다. ref속성은 초기에는 null이었다가 마운트되는 시점에서 물리 DOM 객체의 값이 된다. 즉, ref는 물리 DOM 객체의 참조이다.

하지만 컴포넌트에서 <input ref={refInput}/> 처럼 해당 컴포넌트 내부에서 ref를 적용하는 것 말고도, 부모 -> 자식에도 가능할까? 예를 들어, 커스텀한 <MyInput /> 컴포넌트를 만들고 props로 ref를 전달하여 적용하는 경우이다. 다음 코드를 살펴보자.

import type { DetailedHTMLProps, FC, InputHTMLAttributes, ChangeEvent } from 'react';
import { useRef } from 'react';

// 커스텀한 Input 컴포넌트에게 타입스크립트에서 input 엘리먼트 속성을 적용하기 위한 타입이다,
type ReactInputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,HTMLInputElement>

type Props = ReactInputProps & {};

// 스프레드 연산자를 활용해 부모컴포넌트에서는 input 엘리먼트의 모든 props를 참조할 수 있다.
const Input: FC<Props> = ({ ...inputProps }) => {
    return <input {...inputProps} />
}

const RefToChildExample: FC = () => {

    const refInput = useRef<HTMLInputElement>(null);

    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
        console.log(e.target.value);
    }

    return (
        <div>
            <Input type='text' ref={refInput} onChange={onChange}/>
        </div>
    );
};

export default RefToChildExample;

이 위이 예제를 그대로 적용해보면 다음과 같은 에러가 표시된다.

바로 함수형 컴포넌트(= 자식 컴포넌트)에 ref를 적용하려면 React.forwradRef()함수를 사용하라는 뜻이다. 이 함수에 대해 알아보자

React.forwardRef

ref를 다른 자식 컴포넌트로 전달할 때 사용되는 함수이다. 이를 통해 자식 컴포넌트 내부의 DOM 요소나 컴포넌트 메서드에 접근할 수 있다. 위의 예제에서 <Input /> 컴포넌트를 forwardRef로 적용하여 변경해준다.

const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {

    return <input {...props} ref={ref}/>
});

오류 없이 결과가 잘 출력된다.

자식 컴포넌트에서 부모 컴포넌트의 데이터에 대한 접근은 props를 통해 구현하기 쉽다. 하지만 역순은 어려웠다. forwardRef() 함수 덕에 ref값에 접근이 가능함을 알 수 있다. 하지만 이외에도, ref 말고도 자식 컴포넌트의 함수를 호출하는 등의 다양한 접근을 할 수 있는 방법은 없을까? 다음 포스트에서 알아보자.