# custom hook

31개의 포스트
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

Custom Hook은 기존의 다른 Hook들을 사용할수 있으면 정말 별거 없이 사용 할수 있다.여기서 겹치는 것들이 아주 많다. useState에서 뽑아온 상태가 useCallback에서 그대로 사용되었다. 이게 custom hook이다. 별거 없이 기존의 hook에

2021년 10월 8일
·
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개의 댓글
post-thumbnail

Hook 사용예제: useBeforeLeave

마우스가 화면을 벗어났을 때 실행되는 기능을 구현하였다.화면을 벗어났을 때 이벤트 핸들러인 handle함수를 통해 onBefore함수가 호출되는 것을 알 수 있다.

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

Hook 사용예제: usePreventLeave

창을 닫거나 새로고침 하는 등, "beforeunload"이벤트가 발생했을 때 재확인하는 기능을 구현하였다.event속성인 returnValue는 이 이벤트에 대한 기본 작업이 금지되었는지 여부를 나타낸다. 기본적으로 true로 설정되어 있다. "beforeunload

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