전체 글 (204) 썸네일형 리스트형 [React Custom Hook] Form 의 required field 확인하는 hook (useFormValidation) 1. Form 의 required field 확인하는 hook input fromRef: 타겟 Form element formDataState : 관리되는 form 데이터 state submitFlag : 제출 버튼 눌렀는지 여부 output isFormValidated : validation 통과 되었는지 boolean useFormValidation.ts 코드 import { useEffect, useState } from "react"; // input : formRef, 제출할 formData, submitFlag // output : 통과 여부 export const useFormValidation = ({ formRef, formDataState, submitFlag }) => { const .. [React Custom Hook] Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook (useResizeBreakpoints) 1. Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook input : 없음 output breakpoints : up / down 메소드를 가지고 있는 객체 useResizeBreakpoints.ts 코드 import { useState, useEffect } from "react"; interface GridBreakpoints { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; } interface Breakpoints { up: (bp: keyof GridBreakpoints) => boolean; down: (bp: keyof GridBrea.. [React Custom Hook] 타겟 element 가 viewport 안에 보이는지 판단하는 hook (useVisibilityObserver) 1. 타겟 element 가 viewport 안에 보이는지 판단하는 hook input element: 관찰하고자 하는 타겟 element React.ref rootMargin : 관찰 타겟 주위의 여백, new IntersectionObserver() 생성자에, option 으로 들어가는 값. 예시. "10px 20px 30px 40px" (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 기본값은 0. 타겟 주변의 여백도 포함해서, 그 여백까지 타겟으로 보고, viewport 에서 사라졌는지 판단함. IntersectionObserver.option.rootMargin 더보기 output isVisible : 해당 타겟이 현재 viewport 안에 보이는지 여부 boolean. obser.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 68 다음
