[ react, useHook ] 공통 컴포넌트의 실시간 데이터 전달 useImperativeHandle 훅 소개

https://ko.react.dev/reference/react/useImperativeHandle

useImperativeHandle – React

React를 이용하는 사람들의 대다수는 함수형 컴포넌트로 사용중이다. 과거엔 클래스형으로 사용했다는데, 난 그 땐 개발자가 아니었음 ㅎ 함수형 개발이 뭐가 좋냐?로 따지면 나는 일단 확실히... 보기 좋다라고 생각됨. 그리고 useHook이 정말 강력하다..

useState, useMemo, useCallback, useEffect만 알면 프로젝트 다 할 수 있는 거 ㅇㅈ하는 부분임.

하지만 같은 기능을 만들 때 useHook을 사용하면 정말 적은 비용이 듦에도 다들 모르기때문에 스스로 한땀한땀 만들어낸다. 그게 나다 ㅎ

이 훅은 나도 잘 몰랐는데 이번에 공통 컴포넌트를 만지게되면서 또 공부를 한 훅이다.

내 프로젝트에서 이 훅을 사용한 상황을 소개한다면,

location 정보를 핸들링하는 공통 컴포넌트가 있고, 이 컴포넌트를 온갖 데서 다 쓰고 실시간으로 공유가 되어야 했다. 리액트는 모두가 알다시피 아래로 아래로..수직 갈굼만 가능하다. 연어가 불가능함ㅋ props로 전달하던 데이터를 우리는 상위 컴포넌트, 하위 컴포넌트가 같이 써야할 때가 있다.

(참고로 location 정보는, 우리 셀렉트 박스에서 도시/시군구/동..이런식으로 세개의 데이터가 유기적으로 움직이는 경우 있지 않은가? 서울을 고르면 시군구에는 서울 관련 데이터만 담기는..그런 거다.)

!딜레마!

컴포넌트형으로 쪼개면 관리가 편하고 직관적이라 좋다는데, 그래서 나중에 문제가 생기면 그 한 조각의 컴포넌트만 고치면 되기에 유지보수에 용이하고 좋다는데... 것도 적당히지, 한 데이터를 같이 쓰면서 컴포넌트 쪼개면 그거 어떻게 상태 관리하냐고!!!!ㅜㅜㅜ 이런 상황..나만 자주 만났나?ㅠ

react-hook-form을 사용하는 경우엔 그나마 useFormContext를 이용하는 등으로 여자저차 해결한다 치지만, 훅폼으로도 적당히 안될 때가 있다..이걸 잘 조합해서 여차저차 해야하는데..

그럴 때 사용한 게 이 훅이다.

hook의 정의로 가면 뭐 저렇게 써놨는데 한마디로 얘 forwardRef로 ref받아다가 쓰라는 거(?)같다 ㅋㅋ

맞다. 부모 컴포넌트에서 자식 컴포넌트로 props로 ref를 보낼 수 없다. 하지만 forwardRef로 감싸면 쌉가능함.

이 공통 컴포넌트는 forwardRef로 감쌌다. 그리고 나는 내가 보내고 싶은 데이터를 ref와 함께 전달했다.

option 안에 나는 3개의 데이터를 담았고 이를

상위 컴포넌트 데이터그리드의 프롭스에 전달했다. 난 mui dataGrid를 사용했고 데이터그리드 위 툴바 위치에 location을 나타내는 컴포넌트에 ref를 전달했다.

이렇게 전달한 ref에는 내가 실시간으로 선택한 location 데이터가 담겨 돌아올 것이다.

그리고 나는 그 실시간 데이터를 가져와 따로 조건을 넣어 state에 변경을 해주었다. 만약 이 훅을 사용하지 않았다면 어떤 방법으로 저 많은 데이터를 동시에 관리했을지..나는 모르겠다 ㅎ 참고로 저 함수에서 인수로 받는 form데이터는  reactHookForm에서 준 데이터임.

한 페이지에 저런 공통 컴포넌트를 다 갖다 붙일 수 없는 부분인데 ref로 이렇게 간단히 해결해서 다행인 점이다.