프론트엔드 개발 · 심화
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의 제어 컴포넌트와 비제어 컴포넌트의 차이점은?
- React Server Components란 무엇이며, 기존 SSR과의 차이점은?
- React의 Concurrent Mode와 useTransition, useDeferredValue에 대해 설명해주세요.
- React에서 setState 호출이 항상 비동기적으로 동작한다고 말할 수 있을까요? React 18 이전과 이후의 자동 배치(automatic batching) 동작 차이를 setTimeout이나 Promise 콜백 내부에서의 setState를 예로 들어 설명해주세요.
- JSX는 결국 React.createElement(또는 jsx 런타임) 호출로 변환됩니다. 이 변환 결과인 element 객체가 어떤 구조를 가지며, 이것이 실제 DOM이 아니라 '설명(description)'에 불과하다는 점이 렌더링 파이프라인에서 어떤 의미를 갖는지 설명해주세요.
- 함수형 컴포넌트는 클로저를 기반으로 동작합니다. 이로 인해 발생하는 'stale closure(오래된 클로저)' 문제가 무엇이며, setInterval이나 이벤트 구독 안에서 state를 참조할 때 왜 의도치 않은 값이 보이는지, 그리고 이를 해결하는 방법을 설명해주세요.