# custom hook

33개의 포스트
post-thumbnail

[TIL] 0614 | React with Redux, Next.js, TypeScript

✍🏻 0614 | React with Redux, Next.js, TypeScript ✓ 커스텀 훅이란 무엇인가 ✓ 커스텀 리액트 컴포넌트 ReEvaluation Hook 함수 생성하기 ✓ 사용자 정의 훅 사용하기 ✓ 사용자 정의 훅 구성하기

2022년 6월 14일
·
0개의 댓글
post-thumbnail

React Custom Hooks: useFetch()

컴포넌트를 만들다 보면 반복되는 로직이 자주 발생된다. 따라서 custom hooks를 만들어서 반복되는 로직을 쉽게 재활용 할 수 있다.Custom Hooks는 "use"라는 단어로 시작한다. (ex: useFetch)기존에 사용했던 fetch는 아래처럼 모든 com

2022년 6월 12일
·
0개의 댓글
post-thumbnail

Axios Interceptor에서 Hook을 사용하는 방법

프로젝트를 진행하면서 Axios Interceptor에서 React Hook 및 Custom Hook을 사용하기 위해 고민했던 과정을 소개합니다.

2022년 5월 26일
·
1개의 댓글
post-thumbnail

React hook 클로저 탈출기

React Hook을 사용할 때 필연적으로 마주하게 되는 클로저의존성을 어떻게 잘 탈피할 수 있을까 ⁉️

2022년 4월 10일
·
6개의 댓글
post-thumbnail

[React] custom hook에서 useState를 사용할 때 주의할 점 (No rerender)

목표 : 사이트 소개 툴팁 구현하기 dor.gg 사이트의 유저들에게 사이트 사용 방법을 설명하는 툴팁을 만드는 작업이었다. 기본적으로는 useState를 사용하되, 다음번에 유저가 들어왔을 때에는 툴팁이 뜨지 않도록 localStorage에 저장하는 방법으로 구현 중이

2022년 3월 10일
·
0개의 댓글
post-thumbnail

[React] | 커스텀 훅(Custom hook)

반복 사용되는 함수나 로직을 하나의 기능으로 만들어 놓아, 필요시 import하여 손쉽게 재사용하기 위함재사용되는 함수의 경우 자바스크립트 모듈로 만들어 import 해와 사용할 수 있지만, React의 의존성 배열 등을 사용하여 특정 값의 변화 시 자동 실행되도록 만

2022년 2월 23일
·
0개의 댓글

Day 25.

구조분해할당(비구조화할당) . REST 파라미터. CustomHook. Cache

2022년 2월 21일
·
0개의 댓글
post-thumbnail

[React #15] 관심사의 분리(Separation of Concerns, SoC)와 Custom Hook

Separation of Concerns 하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(걱정)을 부여하게 되면 그 코드를 읽는 사람은 쉽게 혼란에 빠지게 됩니다. 가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 겁니다. 바꿔 말

2022년 2월 16일
·
0개의 댓글

[React] Custom Hook 이란?

1. Custom Hook이란? 커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다. 2. Custom Hook, 왜 사용할까?

2022년 2월 10일
·
0개의 댓글

React.org - Hook

해당글은 React공식문서를 바탕으로 쓰여진 것이며 그외에 참고한 문서는 따로 Reference를 쓰도록하겠다.

2022년 1월 22일
·
0개의 댓글
post-thumbnail

Recoil을 사용하여 커스텀 토스트 훅 만들기

recoil, typescript, styled component를 이용한 커스텀 토스트 훅 만들기

2022년 1월 19일
·
4개의 댓글
post-thumbnail

React - Custom Hook

Custom Hook

2021년 12월 1일
·
0개의 댓글
post-thumbnail

React에서 Form Validation을 해보자 (ft. Custom Hook)

Form validation (폼 유효성 검사) user가 올바른 입력값을 전송하도록 여러 조건을 체크하고 잘못된 점이 있으면 알려주는 것 회원가입이나 기업의 입사지원서 작성시 흔히 볼 수 있음

2021년 11월 14일
·
0개의 댓글

토큰 갱신, 유저 정보 불러오기 custom hook

기록용으로 올리는 react-query, recoil, typescript를 사용한 custom hook유저 정보 불러오기 custom hookaccess 토큰 갱신 custom hook

2021년 11월 12일
·
0개의 댓글
post-thumbnail

Custom Hook

useFetch 커스텀 훅을 만들다가 삽질한 내용을 기록함수형 컴포넌트에서 로직을 쉽게 재사용하기 위해 만드는 hook이다. 재사용 되는 로직들을 커스텀 훅으로 만들어 사용한다.사람들이 자주 만들어 쓰는 커스텀 훅들은 다음과 같다. 아래 1~14번까지는 npm으로 설치

2021년 10월 5일
·
0개의 댓글
post-thumbnail

フックマスターになりたい (1): 커스텀 훅!

리액트 컴포넌트를 처음 학습할 때, 컴포넌트란 "나만의 태그"라고 정의했던 기억이 난다. 좀 더 명확하게 컴포넌트란 props를 인풋으로 받아 DOM을 렌더하는, JSX를 리턴하는 단위(함수, 혹은 클래스)이다. 조금 오해의 소지는 있지만 단순하게는 (자바스크립트가 가

2021년 9월 24일
·
0개의 댓글
post-thumbnail

Hook 사용예제: useNotification

Notifications Api를 사용하여 사용자에게 데스크톱 알림을 보여주는 기능을 구현하였다.fireNotif함수를 실행하면 알림을 보낼 수 있는지 먼저 Notification.permission을 통해 확인한다. 만약 permission이 "granted"라면 설

2021년 9월 22일
·
0개의 댓글
post-thumbnail

Hook 사용예제: useScroll, useFullScreen

스크롤을 사용할 때 현재 위치한 x, y좌표값에 따라 색상이 바뀌는 기능을 구현하였다.

2021년 9월 21일
·
0개의 댓글
post-thumbnail

[TIL] 달력 컴포넌트 만들기 회고록

React에서 Moment.js으로 달력 컴포넌트 직접 만들기

2021년 9월 20일
·
2개의 댓글
post-thumbnail

Hook 사용예제: useFadeIn, useNetwork

useRef훅을 이용하여 element를 참조하고 fade와 delay기능을 구현하였다.opacity와 delay가 각각 (1,2) (5,10)로 적용된 것을 알 수 있다.

2021년 9월 19일
·
0개의 댓글