React.js
-
true/false toggle 메뉴 구현시 useReducer로 구현하기React.js 2024. 6. 27. 12:18
기존 코드// 컴포넌트const [isEndDateOpen, setIsEndDateOpen] = useState(false); setIsEndDateOpen(!isEndDateOpen)}> + 종료 날짜 및 시간 setIsEndDateOpen(!isEndDateOpen)}> - 종료 날짜 및 시간 useReducer로 개선하기// 컴포넌트const [isEndDateOpen, setIsEndDateOpen] = useReducer(state => { return !state;}, false);+ 종료 날짜 및 시간- 종료 날짜 및 시간 개선 후 장점코드가 간결 해진다.useState를 사용해서 true/false 토글시에 useCallback으로 감싸주어야 하거나 해야될 때 가 있는데 u..
-
react-hook-form에서 useController 커스텀 훅 사용React.js/React-hook-form 2024. 6. 25. 19:20
input 타입의 time 필드가 여러개가 존재 할때 재사용할 수 있는 컴포넌트를 만들때 useController 커스텀훅을 사용하면 좋을것 같았다. 재사용 컴퍼넌트를 만들때 useController에서 사용하고자 하는 props를 정의 해주어야 한다.control, name, validationOptions // FieldTime.tsximport React from 'react';import { Control, Path, RegisterOptions, useController } from 'react-hook-form';import Field from '../Field';interface Props> { control: Control; name: Path; validationOptions?: Omit..
-
-
특정한 state 값에 따른 다른 페이지 랜더링을 효율적으로 랜더링 하는 방법에 대해React.js 2024. 5. 19. 19:10
const ScheduleSidebar: FC = ({ isSelecteGroup, isScheduleName, isStartEndPeriod, isPage,}) => { return ( {isPage === 'tourismPage' && ( )} {isPage === 'periodPage' && } ... ... ... {/* 계속 쭉쭉 늘어날거에요! 가독성이 안좋습니다 */} );};export default ScheduleSidebar; isPage 상태값에 따라 `&&` 연산자를 통해서 다른 컴포넌트를 렌더링 하게끔 만들게 되었을때 가독성이 굉장히 안좋아보인다. // 호출 부모 컴포넌트// const ex..
-
react-hook-form Controller를 이용하여 재사용 컴포넌트를 만들때 control props 전달 타입체커 환경 에러React.js/React-hook-form 2024. 5. 11. 20:15
에러 :Type 'Control' is not assignable to type 'Control' 방법1 as unknown as 문법을 이용한 타입 단언https://github.com/react-hook-form/react-hook-form/issues/4965#issuecomment-826862827' is not assignable to type 'Control' · Issue #4965 · react-hook-form/react-hook-form" data-og-description="This seems like a duplicate of #2984. Describe the bug I am experiencing this issue after following the Control example..
-
react-hook-form Controller 사용시 rules validate가 동작하지 않을때React.js/React-hook-form 2024. 5. 11. 19:24
검색 키워드: react-hook-form controller rules not working reference- https://stackoverflow.com/questions/75268266/react-hook-form-rules-validate-not-triggered React Hook Form - Rules.Validate not triggeredI have the following field with a RHF controller and a MUI Textfield: stackoverflow.com ( field.onChange(e.target.value)} > `@${display} `} ..
-
react-hook-form과 다른 라이브러와 함께 사용React.js/React-hook-form 2024. 5. 2. 18:20
react-hook-form을 다른 라이브러리와 함께 사용하고 싶을때가 있다 이를테면 react-date-pick 같은 그럴때 `Controller` 사용 https://react-hook-form.com/docs/usecontroller/controller ControllerPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com
-
프로덕트 투어 라이브러리React.js 2024. 4. 22. 12:04
첫 방문 사용자에게 웹사이트 이용 방법을 안내하기 위해 사용할 수 있는 기능을 명칭으로 프로덕트 투어(product tours)라고 한다. - React Joyride React Joyride Demo react-joyride.com - React Tour GitHub - elrumordelaluz/reactour: Tourist Guide into your React Components Tourist Guide into your React Components. Contribute to elrumordelaluz/reactour development by creating an account on GitHub. github.com react-joyride가 좋아보인다