custom hooks
TIL | 간단한 custom hook 만들어보기 2
간단한 custom hook 만들어보기 2 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useScroll (scroll event를 위한 hook) useScroll.ts import { useState, useEffect } from "react"; export const useScroll = () => { // x축, y축을 초기 상탯값으로 지정 const [scroll, setScroll] = useState({ x: 0, y: 0, }); const handleScroll = () => { // 상탯값을 각각 window.scrollX, window.scrollY값으로 업데이트 (이 부분은 필요에 따라서 수정이 가능한 것으로 보이므로 자유롭게 사용하면 될 ..
TIL | 간단한 custom hook 만들어보기 1
간단한 custom hook 만들어보기 1 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useInput (input을 위한 hook) useInput.ts import { useState } from "react"; const useInput = ( // 초기 상탯값 및 벨리데이터 함수(원하는 조건을 리턴하는 함수) 인자로 받음 initialValue: string, validator: (value: string) => boolean ) => { // 인자로 받은 값을 기준으로 useState 지정 const [value, setValue] = useState(initialValue); // validator 타입이 함수가 아닐시, early return if (..