react9 [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-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. React - Router [ action , loader ] React - Router [ action , loader ] React Router는 URL과 UI를 연결하여 사용자에게 어떤 컴포넌트를 보여줘야 할지를 정의하고 SPA 형식을 구현하기 편리하고 하나의 컴포넌트 내에서 NavLink ,LINk 컴포넌트를 사용하여 한 컴포넌트안에서 어플리케이션의 이동방식의 정의, 해당 path에 맞는 컴포넌트 연결을 보다 쉽게 컨트롤 할 수 있게 하는 라이브러리이다. BrowerRouter / HashRouter 의 차이점 Router에서 Url를 컨트롤 하는 방식으로 BrowserRouter, HashRouter를 많이쓰이는데 둘다 지정된 'path'에 따라 정의된 컴포넌트를 보여주는 것은 동일하다. #BorwerRouter는 예) ' Url/about ' 형식으로 클.. 2024. 1. 9. 이전 1 2 3 다음
