[CS-yum][React] 3회차(1) - useImperativeHandle

🧑🏻‍💻 useImperativeHandle

---

useImperativeHandle은 ref로 노출되는 핸들을 사용자가 직접 정의할 수 있게 해주는 React 훅이다.

🍪 useImperativeHandle 문법

useImperativeHandle(ref, createHandle, dependencies?)
// createHandle: 인자가 없고 노출하려는 ref 핸들을 반환하는 함수

• 컴포넌트의 최상위 레벨에서 호출 가능, 또한 커스텀 훅에서 호출 가능하다. (React 훅)
• undefined를 반환한다. (return X)

🧑🏻‍💻 참고하기

---

🍪 주의 사항

• ref를 과도하게 사용하지 말고 props로 표현할 수 없는 필수적인 행동에만 사용해야 한다. ex) 특정 노드로 스크롤하기, 노드에 초점 맞추기, 애니메이션 촉발하기, 텍스트 선택하기 등
  
• prop으로 표현할 수 있는 것은 ref를 사용하지 않는다. ex) 예를 들어, Modal 컴포넌트에서 {open, close}와 같은 명령형 핸들로 노출하는 대신 <Modal isOpen={isOpen} />과 같은 isOpen prop을 권장한다. 이로써 코드가 더 간결하고 예측 가능하며, 컴포넌트의 독립성과 재사용성이 향상된다. Effect를 사용하면 prop을 통해 명령형 동작을 노출할 수 있다.
  

🧑🏻‍💻 활용 및 생각할 거리

---

🍪 useImperativeHandle와 forwardRef의 활용

• forwardRef와 함께 사용할 때

  부모 컴포넌트에서 자식 컴포넌트의 레퍼런스를 획득하고 useImperativeHandle을 사용하여 레퍼런스에 노출할 메서드나 데이터를 정의한다. 이는 부모 컴포넌트에서 자식 컴포넌트를 직접 조작해야 하는 경우에 유용하다.

• forwardRef 없이 사용할 때

  컴포넌트 내부에서 특정 명령형 동작을 외부로 노출해야 하는 경우에 forwardRef 없이 가능하다.

---

참고 https://react-ko.dev/reference/react/useImperativeHandle