한 컴포넌트에서 생성과 수정 모드를 함께 작업하다보니, defaultValues를 업데이트 시켜야하는 경우가 많았다. 수정모드일땐 props로 받아온 데이터를 넣어주어야하고, 생성일땐 빈값을 넣어주어야한다. defaultValues는 최초 렌더링시에만 값이 들어가기때문에, 'edit'이라는 state가 변할때마다 리렌더링되면서 defaultValues도 업데이트될거라고 생각했는데, 생각처럼 잘 되지않았다. reset()을 사용하는것보다 defaultValues를 사용하는 것이 성능적으로 나을것이라 판단하여 최대한 reset()사용을 지양하고있었는데 구글링은 계속 reset()을 사용하라는 의견뿐이었다. useForm Performant, flexible and extensible forms with ea..

서비스 개발시 form은 필수적으로 활용될 것이다. 로그인 같은 경우도 정말 단순한 기능같지만, 실제로 개발자는 데이터 핸들링, validation체크, 에러 팝업, 데이터 submit 등 많은 것들을 고려해야한다. 이때 React Hook Form이란 라이브러리를 사용하여 훨씬 효율적인 코드를 짤 수 있다. npm install react-hook-form import { useForm } from 'react-hook-form' 1. useForm()이 return해줄 객체를 담을 변수를 생성한다. const form = useForm(); Register useForm hook이 제공하는 여러 method가있다. const { register } = form const { name, ref, onC..

react-form-hook이라는 아주 편리한 훅을 사용 중이다. 지금까지 느낀 점 중 베스트였던 것은 state를 장황하게 만들 필요가 없다는 점! import { useForm } from "react-hook-form"; export const EditForm = () => { const methods = useForm({ defaultValues: { orgName: currentItem.name, orgCode: currentItem.code, }, }); const { register, setValue, getValues, watch } = methods; return ( setValue("orgName", e.target.value)} onBlur={() => watch("orgName")...

엑셀 다운로드 버튼을 누르면 엑셀 파일이 다운로드 되도록 요청을 받았는데 첨엔 으잉? 그걸 어케해??했지만 찾아보니 라이브러리를 이용해 정말 간단하게 할 수 있는 기능이었다. 정말이지.. 다양한 오픈소스를 활용할 수 있는 이 시대에 개발자란것에 감사해야쥐.. xlsx라이브러리를 먼저 설치해주고 import해줘야한다. 엑셀 {this.state.fileDownloading? : null } 다운로드 버튼을 만들어주었으면 onClick 함수의 downloadExcelFile을 뜯어보자. 사실 원래 다운로드 코드는 간단하게 구현가능한데, 이것저것 경우의 수를 고려하고 나의 기존 코드에 맞게 변경하다보니 코드가 길어졌다. downloadExcelFile(){ let paramPage = 0; let temp =..

현재 진행 중인 앱의 admin페이지는 반응형이 적용되어 있지않아 모바일 진입시 화면이 깨져버린다. 이를 위해 모바일화면에선 'pc버전으로보기' 버튼을 추가해 모바일에서도 pc화면과 똑같은 크기로 볼 수 있도록하여 zoom in/out 가능하도록 설정해주려한다. 이를위해 index.html파일의 기기장치를 인식할때 사용되는 viewport메타태그를 변경해주어야한다. index.html파일에서 처음부터 viewport태그를 없애주거나 원하는 스케일로 변경해주면 안될까?싶었지만, pc버전으로 보기 버튼을 만들어주는 App.tsx파일에서 버튼클릭 시 index.html파일의 뷰포트 메타태그를 변경할 수 있도록 만들어주기로하였다. // index.html 처음 생각한 방법으론 버튼 클릭 후 메타태그를 새로운 메..