# custom hook
[TIL] 0614 | React with Redux, Next.js, TypeScript
✍🏻 0614 | React with Redux, Next.js, TypeScript ✓ 커스텀 훅이란 무엇인가 ✓ 커스텀 리액트 컴포넌트 ReEvaluation Hook 함수 생성하기 ✓ 사용자 정의 훅 사용하기 ✓ 사용자 정의 훅 구성하기
React Custom Hooks: useFetch()
컴포넌트를 만들다 보면 반복되는 로직이 자주 발생된다. 따라서 custom hooks를 만들어서 반복되는 로직을 쉽게 재활용 할 수 있다.Custom Hooks는 "use"라는 단어로 시작한다. (ex: useFetch)기존에 사용했던 fetch는 아래처럼 모든 com
Axios Interceptor에서 Hook을 사용하는 방법
프로젝트를 진행하면서 Axios Interceptor에서 React Hook 및 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
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)로 적용된 것을 알 수 있다.