본문 바로가기

ref

[ react, useHook ] 공통 컴포넌트의 실시간 데이터 전달 useImperativeHandle 훅 소개 https://ko.react.dev/reference/react/useImperativeHandle useImperativeHandle – ReactThe library for web and native user interfacesko.react.devReact를 이용하는 사람들의 대다수는 함수형 컴포넌트로 사용중이다. 과거엔 클래스형으로 사용했다는데, 난 그 땐 개발자가 아니었음 ㅎ 함수형 개발이 뭐가 좋냐?로 따지면 나는 일단 확실히... 보기 좋다라고 생각됨. 그리고 useHook이 정말 강력하다..useState, useMemo, useCallback, useEffect만 알면 프로젝트 다 할 수 있는 거 ㅇㅈ하는 부분임.하지만 같은 기능을 만들 때 useHook을 사용하면 정말 적은 비용이 듦.. 더보기
[ react, MUI ] mui의 dataGrid props "apiRef" 활용 뻔한 얘기이겠지만?? 데이터 그리드에서도 ref를 사용할 수 있다.useGridApiRef를 import하면, 데이터그리드 핸들링이 훨씬 편하다.이를 활용한 코드를 소개하려고 한다. 1. MUI 데이터그리드 정렬 기능의 동적 해제 기능 추가mui DataGrid에는 기본적으로 sorting 기능이 있다.컬럼에 마우스 오버하면 화살표가 생기면서 오름차순, 내림차순의 정렬이 가능하다. 이 때 정렬 기능을 사용하고나서 자동 해제를 동적으로 조절해야할 때가 있었다. 화면 내부에서 reset버튼을 눌렀을 때 화면을 새로 그리는데, 사실 데이터그리드는 데이터가 변경될 뿐 실제로 새롭게 화면이 렌더링이 되는 것은 아니라서 정렬 기능이 리셋되지 않았다.이 때 나는이런식으로 정렬 해제를 해주었다. reset을 알리는 상.. 더보기