반응형
React로 개발깨나 하시는 분들은 hooks를 거의 반드시라고 해도 좋을 정도로 대부분 사용하고 계실 것 같습니다.
대표적으로는 useState, useEffect, useRef 등에서 부터 custom하게 만든 hooks까지 많은 hook이 있는데요, 그 중에서 useImperativeHandle이라는 hook을 사용하는 경우는 그다지 많은 것 같지 않습니다.
보통은 '이런 훅도 있었어?' 라는 반응을 보이는 경우가 많더라구요. 하지만, 이 hook을 사용하면, 부모가 자식의 상태에 대해서 아무 것도 알지 못해도, 자식의 데이터를 손쉽게 가져다 사용할 수가 있게 됩니다. 마치 클래스형 component에서 자식의 method를 가져다 사용하던 것처럼요!
// Parent.jsx
const Parent = () => {
const childRef = useRef();
return <Child ref={childRef} >;
};// Child.jsx
const Child = forwardRef((props, ref) => {
const [userInfo, setUserInfo] = useState({ id: "", password: "" });
/**
* Parent component는 이제 childRef.current.getUserInfo()를 통해 해당 값을 가져갈 수 있게 됩니다.
*/
useImperativeHandle(ref, () => ({
getUserInfo: () => userInfo,
}));
return (
<>
<input
value={userInfo.id}
onChange={(e) => setUserInfo({ ...userInfo, id: e.target.value })}
/>
<input
value={userInfo.password}
onChange={(e) => setUserInfo({ ...userInfo, password: e.target.value })}
/>
</>
);
});어렵지 않은 코드이므로 쉽게 이해할 수 있을 거라고 생각합니다. 만약 이 hook을 사용하지 않았더라면, userInfo라는 상태를 Parent에서 정의해 내려주고, 값을 바꾸는 것도 바깥의 handler를 통해서 해야하는 번거로움이 있었을 겁니다. 그런 과정에서 의미없이 길어지는 코드는 덤일테구요.
하지만 우리는 이제 useImperativeHandle을 통해서 마치 클래스 컴포넌트에서 그랬던 것처럼 자식의 method를 부모에서 가져다가 사용하면서, 컴포넌트의 상태나 비즈니스 로직을 고립시킬 수 있게 되었습니다.
반응형
