MUI 썸네일형 리스트형 [ react, MUI ] 대리님이 알려준 CheckBox onChange에대한 데이터 타입 변환 공통 처리 MUI 컴포넌트중에 CheckBox가 있다.체크된 상태, 아닌 상태를 왔다갔다 하며 데이터 변환을 전달하는 용이한 컴포넌트이다. 나같은 경우 checked상태면 'Y'라는 값을 전달하고, 체크가 풀리면 'N'을 전달한다. 그걸 reactHookForm을 사용한다면setValue("flag","Y") 이런식으로 썼다. 그랬더니, 이게 ㅎ form변화가 실시간으로 개빨리 적용될 때가 있고 아닐 때도 있어서 그런지 됐다 안됐다 하는 거 아니겠음? 그래서 setValue("flag","Y",{ shouldDirty:true })옵션까지 써재끼면서 왔다갔다를 그렇게 했다...그걸 본 대리님은..이렇게 공통을 수정하셨고난 이렇게 사용하게 되었다 ㅎ 얼마나 편한지 원,,control를 인자로 받는 만큼 이 컴포넌트는.. 더보기 [ 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을 알리는 상.. 더보기 이전 1 다음
