e7e

참으로 끔찍하겡 달가운 이야기당.커스텀 훅을 잘 써야 되는 게 아니야요?~~ 그렇당 잘 써야 할 꺼이당. 컴포넌트 내부 소스를 간단히 하기 위해서도, 더불어 가독성을 올려드리고,재 사용 가능하게 맹글어서, 이 컴포넌트 저 컴포넌트에서도 널리 재활용가능하게 하기 위해서도.. ( 현실에서도 재활용은 쓰레기를 줄여준당!) 사람도 일회성이 아니고, 재활용이 가능했으면 하는 무서운 바람이 분당. Custom Hook을 만드는 건 너무나 간단하지만좋은 재사용 유용한 Custom Hook을 만드는 일은 그리 간단하지는 않당. 개인적인 추천은 컴포넌트를 만들다 보면, 컴포넌트 내부(특히 JSX 리턴 앞부분)의JS 소스가 많아지면, 보기가 조금씩 힘들어지기 시작하는데, 이것을 커스텀 훅으로별도 파일로 빼내보면 은근 슬쩍..

React 2026. 1. 19. 15:06

프로젝트는 vite로 알아서 맹글기 보통은 특별히 react-hook-form(인기 짱) 같은 라이브러리를 사용하지 않고, 직접 form을 제어한다면 아마도 아래와 같은 형태가 될 꺼이당.form 태그에 onSubmit이벤트와 ref 걸어서 사용[ 물론 누군가는 useRef를 쓰지 않고 controlled 방식을 선호할 수도 있음이당. 또 누군가는 ref없이 event.target을 쓸 수도 있당 ] App.jsximport { useRef, useState } from "react";function App() { const [data] = useState({ email: "", password: "" }); const formRef = useRef(); const handleSubmit = as..

React 2025. 12. 26. 11:17

리액트 하다보면 꽤나 자주 로딩 Spinner가 아쉽당.코드 동작확인이야 대충 로딩중... 이란 메세지를 띄우면 되지만사람인지라 곧 제대로 된 있어보이는 Spinner를 넣지 못한게마음에 띰띰함을 남기고... 그저 반복되는 오디 괜찮은 거 없낭?하는 당연한 아쉬움이 그렇게 스스로의 맘을 눅눅하게 만든당. 요때다 지금 상황이 그러하다면 아래 링크를 따라 가보장.https://mhnpd.github.io/react-loader-spinner/꽤나 따양하고 땀찍한 9개 Spinner가 시선을 잡아간다.[실제는 훨씬 더 많이 제공되서 기쁘미당.] 그럼 바로 사용법을 눈에 확인 시켜 주어보장.당연 폴더를 1개 만들공, vscode로 해당 폴더를 열공, 터미널에npx create-vite@latest .입..

React 2025. 11. 7. 14:41

아니 또 누군가는 Tree 컴포넌트를 쓰고 싶단다.jstree는 jquery가 필요한 jquery 플러그인이닝, React를 쓴다면 과감없잉 버릴깡?[ jquery 4가 발표되었당!~ 무엇이 바뀌었을깡??? ] rc-tree란 게 있당. 중국말 설명이 중국산인가 보당. 아래 npmjs에 가면 api가 테이블로 정리 되어 있당. 지금은 대략 눈치껏 확인 정도만...https://www.npmjs.com/package/rc-tree 아래 링크 가면, 실행 예제와 소스를 볼 수 있어, 어쩔 또 올 수 밖에 없낭? 하는 느낌이당. https://tree-react-component.vercel.app/demo/draggable 시작하면 절반이라 했던강... 밧다리 드러가장. vite로 필요한 프로젝트 맹글었..

React 2025. 11. 4. 12:19

드디어 svar gantt가 쓸만하게 업그레이드 되었당. (패키지이름도 wx-react-gantt에서 @svar-ui/react-gantt로 살짜기 바뀌었당) 대부분의 간트차트가 유료인 어쩔수 없는 상황에서 svar gantt는 나름 유일한 대안이었지만가이드 문서부터 실제 실행되는 모습, 리액트 버젼 지원까지 디테일하게 따지자면...문제가 한 두가지가 아니었지만... 이제는 사용해 볼만하당.(제대로 안된 문서를 읽고 버린 시간에 미쳐버린 천둥 눈물이 썰물로 빠진당.)[결코 완벽하다는 이야기는 결코 아니당. 비 바람 번개는 여전히 하늘에 산당] 아래 링크에 가면 열심히 설명한당.https://docs.svar.dev/react/gantt/getting_started/ 바로 감정 들어가 보장.당근..

React 2025. 11. 3. 12:31

아무래도 때가 된 것 같다.이제 부터는 TypeScript로 리액트를 해보장.Node와 vscode는 당근으로 이미 설치되어 있어야 한당. TypeScript가 대략 먼지는? 아래 글을 읽고 오장 (싫다면 그러렴)2025.01.13 - [자바스크립트] - TypeScript(타입스크립트) 넌 머냥? 거두절미 하고 바로 퐁당 들어가 보장. (실무는 실체적 느끼미가 중요하당)나의 경우 react-type1(꼭 소문자로)으로 새 폴더를 만들어서 열었당. Terminal -> New Teriminal을 열고는 아래 명령어를 치장(Powershell 이 문제를 일으키면 그냥 cmd라고 치고 다시 한당)npx create-vite@latest .아래 처럼 선택 하여 본당. 참고로 rolldown-vite는 Exp..

React 2025. 10. 21. 20:03

오늘은 HJ의 요청으로 리액트 라우터에 대해 이야기를 구찌스럽게 해보려 한당.먼저 form 전송 방식이 아닌, 데이터 관련 한 것만 B/E 서버와 비동기 AJAX로 통신하는SPA(Single Page Application) 기준으로 보면 구찌 주소표시줄 URL을 관리하는 라우터가 필요한가 의구심이 들 수도 있당. (의구심이 들었다면 오히려 감각이 뛰어나미당!) AJAX에 쓰는 URL은 주소 표시줄에 나타나지 않고, 나타낼 필요도 없음이당.SPA란 것이 최종 사용자 입장에선 거의 데스크탑 앱 느끼미당.하지만 이미 최종 사용자들은 URL 자체를 즐겨찾기에 저장하거나, URL을 보고 본인이어디에 있는지를 아는 사람들도 있기 때문에 새로운 환경을 만들기 전까지는 URL 관리가필요함을 인지 하지 아니 하지 않을 ..

React 2025. 5. 16. 00:23