React7 [React-Hook-Form] watch ,reset ,setValue useHookForm은 useQuery와 더불어 가장 만족한 라이브러리로 뇌의 재사용을 위해 기재해놔야겠다.. #SetValue setValue(fieldName, value, options); setValue의 매개변수는 'fieldName' 타겟필드명 , 변경할 값 , "option shouldValue : true" 로 옵션 값을 설정하여 유효성 검사도 추가로 가능하며, 폼의 유효성 상태를 즉시 반영 하고 싶을 때 사용한다. #reset reset(); // 전체 리셋 reset({'fieldName' : '변경할 값 '}) // 특정 필드 값 초기화 폼 제출하거나 값을 특정 값으로 초기화 시킬 때 주로 사용한다. #Watch const fieldValue = watch(fieldName); con.. 2024. 3. 1. [React] Css in js / Styled.component #1. Css-in-js / Styled.component 이거 왜 씀? 처음에 난 이거 왜 쓰는지 정말 몰랐다. 동적으로 스타일을 변경할때 쓰인다고 익히 들었지만 그것도 modules.css로 가능한것이었으니까 예로 import classes from '경로'; hello world 이런식으로도 충분하게 가능한 부분이어서 별 필요성을 못느끼던 찰나 컴포넌트에서 props로 전달하고 그 props의 값을 이용해서 css in js의 스타일을 변경 할 수 있다는 것을 발견.. 이는 굳이 상태 훅이나 따로 만들 필요없이 컴포넌트 내에서 css in js도 같은 props를 이용해서 css가 동적 할당이 가능하라는 뜻이다 (직관적이라는 뜻.) 이는 불필요한 로직이 필요가 없어지며, 또 내가 직접 클래스을 인에.. 2024. 2. 3. [React-Query 사용하기] #React- Query React-Query는 데이터 가져오기, 캐싱, 동기화 등 서버상태를 관리할 수 있게 해주며, 다른 컴포넌트 끼리도 key를 이용하여 선언한다면 이는 결은 다르지만 redux같이 상태공유 같이 캐싱된 데이터를 공유할 수 있도록 하여 불필요한 요청을 줄이고 어플리케이션의 성능 향상시키는 강력한 라이브러리이다. #React-Query 사용하는 이유 '예시' 예로 SPA 형식의 웹페이지에서 게시판을 만든다고 가정한다면 CRUD 기능 이후 데이터 무결성을 위해서 CRUD 기능 이후 서버에 해당 로직에 필요한 데이터를 재 요청하여 상태업데이트를 해야한다. AS-IS 방식 const [ board , setBoard ] = useState({ board : '게시판 이름', boardCon.. 2024. 1. 30. [React-datePicker] 시작날짜, 종료날짜 컴포넌트 만들기 (1) #React 데이터피커 데이터피커는 보다 간편하게 사용자에게 날짜를 직관적으로 선택하게 해줄 뿐만아니라, 개발자의 DX를 향상시켜주는 강력한 라이브러리이다. React-hook-form(폼 데이터 관리 라이브러리) + Yup(폼 유효성검사 라이브러리) + React-datePicker 와 같이 사용하면 매우 강력한 시너지효과로 탄탄한 폼을 만들 수 있다. new FormData나 객체형으로 직접 사용하지않고 폼데이터 Handler를 구현할 수 있으며, Yup을 통해 매우 간편 유효성검사와 에러처리를 쉽게처리 할 수 있는 장점을 가졌다. 1. 데이터피커 설치 npm install react-datepicker --save 제일 먼저 필요한 라이브러리 설치, npm or Yarn 필수 2. 데이터피커 프로퍼.. 2024. 1. 27. 이전 1 2 다음
