# Custom Hooks

23개의 포스트
post-thumbnail

Day-25 Custom Hooks, Cache-Modify

Costom Hooks이란 use로 시작하는 함수를 말하며, 함수형 컴포넌트에서 사용한다.(클래스형은 HOC를 사용한다.)use로 시작하는 함수를 말하지만 무조건적인건 아니며 관례에 따른다.use를 사용하지 않고 일반 function과 구분하지 않으면 서비스 규모가 커

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

코드캠프 FE 25일차 - TIL(비구조화 할당(=구조분해할당), Custom-Hooks,Cache-Modify)

📔 6주차 학습목표const {}, const \[]원리 >> Destructuring타입 >> Generic웹 에디터 >> Web-Editor결제 API >> Iamport지도 >> Map📔 학습목표const {}, const \[]원리 (구조분해할당의 원리) >

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

25) 월요일

React Destructuring(비구조화 할당/ 구조분해 할당)

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

[React] Custom Hook 사용하기 + useOutsideClick

Custom Hook은 이름이 use로 시작하는 자바스크립트 함수이다.Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 다음과 같이 분리하여 사용할 수 있다.자신만의 Hook을 만들면 컴포넌트 로직을 함수로

2022년 4월 17일
·
0개의 댓글

이전값을 기억하는 Custom-hooks

!codesandboxcustom-hooks-useref-practice-forked-nydmm7?fontsize=14&hidenavigation=1&theme=dark처음 App.js 렌더링 될 때 그 시점에는 previousValue 값이 비어있으므로, 빈 값을 렌

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

[React] React Router, page 이동하기

React를 이용할 때 또다른 유명한 library중 React-Router가 있다. React-Router는 React에서 CSR 기반의 page routing을 할 수 있게 해주는 라이브러리이다. 여기서 CSR은 뭐고, page routing은 뭘까? 아래에서

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

[React Hooks] Fetching Data & Custom Hooks

1. 서버 2. Fetching Data Server로 TodoList를 받아온다고 했을 때, useEffect 안에 fetching Data 로직을 넣는다. 앞서 살펴본 useEffect는 여러 번 사용할 수 있다는 장점이 있다. useEffect의 첫 번째 인

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

코드캠프 부트캠프 25일차

ES6에 추가된 JS 표현식으로 배열이나 객체에서 특정 데이터를 변수로 추출해서 사용할 수 있게 해준다.자주 사용하는 useState(), useQuery()또한 이러한 형식으로 이루어져있다는 것을 이번 시간을 통해 알게 되었다. 변수를 선언하고 해당 데이터들을 가져오

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

Custom Hooks

커스텀 훅을 사용하여 코드 재사용하기

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

리액트 커스텀 훅을 만들어보자.

커스텀 훅만 다루는 거 치고는 내용이 길다.

2022년 1월 21일
·
2개의 댓글

[개발일지] Context API, Custom Hooks in React

리액트의 상태관리 방법중 하나인 Context API, 그리고 이와 관련한 Custom Hooks의 사용법에 대해 공부해보았습니다.

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

React.js: Custom Hooks

React.js의 커스텀 Hooks에 대해 살펴보고자 합니다.

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

React | Hooks 02 ( useReducer / useMemo / useCallback / useRef / 커스텀 hooks)

useReducer useReducer 란? > useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hooks > 리듀서 란? > 현재 상태, 액션 값(업데이트를 위해 필요한 정보를

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

[React] 11. Hooks (2)

1. hooks ⭐ hooks를 처음 본다면 hooks (1)을 참고하면 된다. 1.1 useMemo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. src/Average.js 파일을 생성하여 리스트에 숫자를 추가하면 추가된 숫자

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

COINSS: React Custom Hooks로 Scroll Event 구현하기

Scroll Event를 Custom Hook으로 빼보는 방법에 대해 공부해보도록 하겠습니다. 일반적인 Scroll Event 일반적으로 Scroll Event를 감지하기 위해서는 addEventListener('scroll')을 이용하면 됩니다. 앞에 스크롤 이벤

2021년 5월 8일
·
3개의 댓글

React- Hooks #2

나만의 훅을 만들어 보자.파일 하나를 생성하자. useWindowWidth.js파일을 만들자.useWindowWidth.jsExample5.jsx이렇게 하면 name 옆에 현재 가로값이 나올 것이다. 위에서 하고 싶었던 거는 가로값을 줄었다 늘렸다 하면 가로값이 화면에

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

#5 Today I Learned - 21.01.10

classnames ❗️ react : custom hooks 기본 사용법

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

React 컴포넌트 재사용 방법

수학과 컴퓨터 과학에서 고차 함수는 하나 이상의 함수를 인수로 가지거나 함수를 결과로 반환하는 함수이다. 다른 모든 함수들은 일차 함수이다. (위키백과)컴포넌트를 매개변수로 받아서 컴포넌트를 반환하는 컴포넌트

2020년 10월 6일
·
0개의 댓글

React Hooks #12 Class-Component를 고려한 커스텀 훅

기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용참고 : 책 : 실전 리액트 프로그래밍/이재승 저

2020년 7월 13일
·
0개의 댓글

React Hooks #6 커스텀 훅 만들기

React에서 기본으로 제공하는 useState, useEffect 등의 훅을 사용해 새로운 훅을 만들어낸다.창의 너비를 알려주는 훅컴포넌트의 마운트 여부를 알려주는 훅(HOC보다 훨씬 간결하게 사용가능하며, 타입스크립트와의 호환도 좋다!)훅의 호출 순서는 동일해야 한

2020년 7월 13일
·
0개의 댓글