# custom hook
[React] custom hook에서 useState를 사용할 때 주의할 점 (No rerender)
목표 : 사이트 소개 툴팁 구현하기 dor.gg 사이트의 유저들에게 사이트 사용 방법을 설명하는 툴팁을 만드는 작업이었다. 기본적으로는 useState를 사용하되, 다음번에 유저가 들어왔을 때에는 툴팁이 뜨지 않도록 localStorage에 저장하는 방법으로 구현 중이
[React] | 커스텀 훅(Custom hook)
반복 사용되는 함수나 로직을 하나의 기능으로 만들어 놓아, 필요시 import하여 손쉽게 재사용하기 위함재사용되는 함수의 경우 자바스크립트 모듈로 만들어 import 해와 사용할 수 있지만, React의 의존성 배열 등을 사용하여 특정 값의 변화 시 자동 실행되도록 만
[React #15] 관심사의 분리(Separation of Concerns, SoC)와 Custom Hook
Separation of Concerns 하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(걱정)을 부여하게 되면 그 코드를 읽는 사람은 쉽게 혼란에 빠지게 됩니다. 가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 겁니다. 바꿔 말
[React] Custom Hook 이란?
1. Custom Hook이란? 커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다. 2. Custom Hook, 왜 사용할까?
.jpeg)
Recoil을 사용하여 커스텀 토스트 훅 만들기
recoil, typescript, styled component를 이용한 커스텀 토스트 훅 만들기
React에서 Form Validation을 해보자 (ft. Custom Hook)
Form validation (폼 유효성 검사) user가 올바른 입력값을 전송하도록 여러 조건을 체크하고 잘못된 점이 있으면 알려주는 것 회원가입이나 기업의 입사지원서 작성시 흔히 볼 수 있음
토큰 갱신, 유저 정보 불러오기 custom hook
기록용으로 올리는 react-query, recoil, typescript를 사용한 custom hook유저 정보 불러오기 custom hookaccess 토큰 갱신 custom hook
Custom Hook
Custom Hook은 기존의 다른 Hook들을 사용할수 있으면 정말 별거 없이 사용 할수 있다.여기서 겹치는 것들이 아주 많다. useState에서 뽑아온 상태가 useCallback에서 그대로 사용되었다. 이게 custom hook이다. 별거 없이 기존의 hook에
Custom Hook
useFetch 커스텀 훅을 만들다가 삽질한 내용을 기록함수형 컴포넌트에서 로직을 쉽게 재사용하기 위해 만드는 hook이다. 재사용 되는 로직들을 커스텀 훅으로 만들어 사용한다.사람들이 자주 만들어 쓰는 커스텀 훅들은 다음과 같다. 아래 1~14번까지는 npm으로 설치
フックマスターになりたい (1): 커스텀 훅!
리액트 컴포넌트를 처음 학습할 때, 컴포넌트란 "나만의 태그"라고 정의했던 기억이 난다. 좀 더 명확하게 컴포넌트란 props를 인풋으로 받아 DOM을 렌더하는, JSX를 리턴하는 단위(함수, 혹은 클래스)이다. 조금 오해의 소지는 있지만 단순하게는 (자바스크립트가 가
Hook 사용예제: useNotification
Notifications Api를 사용하여 사용자에게 데스크톱 알림을 보여주는 기능을 구현하였다.fireNotif함수를 실행하면 알림을 보낼 수 있는지 먼저 Notification.permission을 통해 확인한다. 만약 permission이 "granted"라면 설
Hook 사용예제: useScroll, useFullScreen
스크롤을 사용할 때 현재 위치한 x, y좌표값에 따라 색상이 바뀌는 기능을 구현하였다.
Hook 사용예제: useFadeIn, useNetwork
useRef훅을 이용하여 element를 참조하고 fade와 delay기능을 구현하였다.opacity와 delay가 각각 (1,2) (5,10)로 적용된 것을 알 수 있다.
Hook 사용예제: useBeforeLeave
마우스가 화면을 벗어났을 때 실행되는 기능을 구현하였다.화면을 벗어났을 때 이벤트 핸들러인 handle함수를 통해 onBefore함수가 호출되는 것을 알 수 있다.
Hook 사용예제: usePreventLeave
창을 닫거나 새로고침 하는 등, "beforeunload"이벤트가 발생했을 때 재확인하는 기능을 구현하였다.event속성인 returnValue는 이 이벤트에 대한 기본 작업이 금지되었는지 여부를 나타낸다. 기본적으로 true로 설정되어 있다. "beforeunload