패스잇
프론트엔드 개발 · 심화

React의 useImperativeHandle Hook의 용도와 사용법에 대해 설명해주세요.

힌트 · 부모에게 노출할 인스턴스 값 커스터마이징을 생각해보세요.

useRef부모 컴포넌트인스턴스명령형DOM API

모범답안

useImperativeHandle 훅은 React 컴포넌트가 부모 컴포넌트에게 노출하는 인스턴스 값을 커스터마이징할 때 사용됩니다. useRef 훅과 forwardRef를 함께 사용하여 자식 컴포넌트의 DOM 노드에 직접 접근하는 대신, 부모 컴포넌트가 사용할 수 있는 명령형 API를 정의할 수 있습니다.

예를 들어, 비디오 플레이어 컴포넌트가 있다고 가정했을 때, 부모 컴포넌트에서 play(), pause() 같은 메서드를 직접 호출하고 싶을 수 있습니다. useImperativeHandle을 사용하면 이러한 메서드들을 정의하고 부모 컴포넌트에게 필요한 기능만 선택적으로 노출할 수 있습니다. 이를 통해 자식 컴포넌트의 내부 구현을 숨기고 더 깔끔한 API를 제공할 수 있습니다.

useImperativeHandle(ref, () => ({
  play: () => {
    // 비디오 재생 로직
  },
  pause: () => {
    // 비디오 일시 정지 로직
  }
}));

useImperativeHandle은 꼭 필요한 경우에만 사용해야 하며, 일반적으로는 React의 데이터 흐름 방식을 따르는 것이 좋습니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 React 면접 질문

← React 면접 질문 전체 보기