상위 컴포넌트로 전달 useImperativeHandle & forwardRef

useImperativeHandle과 forwardRef는 React에서 자식 컴포넌트의 메서드나 속성을 부모 컴포넌트에서 직접 접근할 수 있도록 해주는 기능입니다.

forwardRef는 React 컴포넌트를 정의할 때 사용되는 함수로, 부모 컴포넌트가 자식 컴포넌트의 ref 속성을 통해 자식 컴포넌트의 인스턴스에 접근할 수 있게 합니다. forwardRef 함수를 사용하면 부모 컴포넌트에서 자식 컴포넌트의 메서드를 호출하거나 속성에 접근할 수 있습니다.

useImperativeHandle은 함수형 컴포넌트 내에서 사용되는 Hook입니다. 이 Hook은 부모 컴포넌트에서 자식 컴포넌트의 특정 함수나 값을 직접적으로 호출하거나 사용할 수 있도록 합니다. useImperativeHandle을 사용하여 자식 컴포넌트의 메서드를 외부에 노출시키면, 부모 컴포넌트에서 ref를 통해 해당 메서드에 접근할 수 있습니다.

forwardRef와 useImperativeHandle은 함께 사용될 때 자식 컴포넌트의 메서드를 부모 컴포넌트에서 직접 호출할 수 있도록 해줍니다. forwardRef를 사용하여 부모 컴포넌트에서 자식 컴포넌트의 인스턴스에 접근하고, useImperativeHandle을 사용하여 자식 컴포넌트의 메서드를 외부로 노출시킵니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트의 메서드를 호출하거나 속성에 접근할 수 있게 됩니다.