# custom hook

23개의 포스트
post-thumbnail

React - Custom Hook

Custom Hook

7일 전
·
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개의 댓글

Hook 사용예제: useTtile, useConfirm

useTitle title을 변경하는 기능을 구현하였다. (5초 뒤에 title이 "Home"으로 변경됨) before after useConfirm 사용자가 어떤 행동을 하기 전에 확인하는 기능을 구현하였다. useState와 useEffect를 사용하지 않

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

Hook 사용예제: useTabs + 함수형 컴포넌트의 event 처리

+(함수형 컴포넌트의 event를 처리할 때 함수를 호출하는 경우). Tab창을 구현하는 커스텀 훅을 구현해보았다.객체를 return 했을 때 { currentItem, changeItem } = useTabs(1, content); 이것처럼 객체안의 값들을 바로 쓸

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

Custom Hook

컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들어서 input을 관리하는 코드나 fetch기능을 수행하는 코드는 관리할 때마다 거의 비슷한 코드가 반복된다. 따라서 커스텀 훅을 이용해 중복되는 코드를 하나의 로직으로 묶어 언제나 쉽게 import할 수

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

커스텀 훅

비동기 리퀘스트를 위한 커스텀 훅을 만들어서 사용해봤다.뭐 대충 이렇게 짰던것 같다. 리스트를 렌더링하려고 구현했는데, 리스폰스 받는데 시간이 조금 걸리면 리스트가 제대로 렌더링되지 않는 문제가 발생했다. 그래서 리액트 공식문서를 보다가 커스텀 훅을 이용해 해결할수 있

2021년 7월 28일
·
0개의 댓글
post-thumbnail

React Hooks, Custom Hook 만들기

공식 문서의 custom hook 설명 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.이전 게시글 (useEffect)에서 작성한 코드를 보자.여기서 resize하는 로직, document.title, 그리고 이름을 입력하는 부분 을

2021년 7월 15일
·
0개의 댓글
post-thumbnail

Api 호출하는 커스텀 훅 만들기

회사에서 Api를 호출할때 react-async 라이브러리를 사용하고 있었는데 이 라이브러리를 사용하면서 불편했던 부분이 있어서 커스텀 훅을 만들기로 결심하게 됐다.우선 react-async 의 사용방식은 아래와 같다.이렇게 api를 GET만 하는 경우에는 사용방식이

2021년 6월 23일
·
0개의 댓글
post-thumbnail

React API 연동

react는 front-end에서 사용하기 때문에 데이터를 모두가 사용할 수 있게 저장할 수 없다는것을 의미하고, 이는 다른 사용자와의 데이터 공유가 이뤄질 수 없음을 의미합니다.axios는 REST API에 데이터를 요청할 때 이를 promise로 처리할 수 있게 해

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

React 유용한 URL Hooks

오늘은 URL 관련 유용한 Hooks에 대해 알아보도록 할게요 : )

2021년 6월 3일
·
4개의 댓글