# hook

206개의 포스트
post-thumbnail

useCallback

useCallback은 콜백 함수를 기억해야 할때 쓰입니다.위에 코드를 간단하게 보면 App컴포넌트는 ChildComponent와 DummyComponent를 자식 컴포넌트로 가지고 있고 ChildComponent에게는 콜백함수 와 state를 전달해주고 DummyCo

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

useMemo && React.memo

자신의 상태가 변경될때부모로 부터 받은 props가 변경될때부모의 상태가 변경될때이런식으로 부모 컴포넌트가 자식 컴포넌트에게 연산이 큰 props와 변화가 잦은 props 두가지를 전달한다고 했을때 변화가 잦은 props가 변할때마다 자식 컴포넌트는 다시 렌더링이 된다

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

useRef

useRef의 기본적인 기능은 고유의 값을 저장하는 것이다. 만약 태그에 사용된다면 해당 엘리먼트를 참조할수 있다. 인자로 받는 값은 useState와 동일하게 초기값이다.useRef는 React내부에서 생성된 객체이며 해당 객체는 값을 저장하는 것이 아니라 특정 메모

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

useEffect 와 Hook

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use

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

useState

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use

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

항해 3기 3주차 WIL

시간이 쏜살같다. 99일중에서 21일이 지난 시점에서 무엇을 공부하였는지 메모를 남겨보려고 한다. Life Cycle에 대하여 항해 99는 기본적으로 스파르타코딩클럽에서 제공하는 강의 상품들을 참가자에게 제공하는 시스템으로 이루어져있다. 강의를 수강하는 것은 자유나, 적어도 이부분은 들어야 한다고 리미트를 정해주는 식이다. 나는 자바스크립트 관련 강의를 ...

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

[React] 함수 재사용

환경을 생각하며 함수를 재사용해봅시다 ♻️

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

Context API 를 사용한 전역 값 관리

아래 코드를 보면 App 컴포넌트에서 , , 가 구현되어 있고, 이 함수들은 UserList 컴포넌트를 거쳐 각 User 컴포넌트들에게 전달되고 있다. 여기서 UserList 컴포넌트의 경우, 해당 함수들을 직접 사용하지 않고 함수들을 전달하기 위한 중간다리 역할만

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

useReducer 를 사용하여 상태 업데이트 로직 분리

상태를 관리할 때 말고도 다른 방법이 있다. 바로 를 사용하는 것이다. 이 hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 다른 파일에 작성 후 불러와서 사용할 수도

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

useCallback 을 사용한 함수 재사용

은 지난 글에서 다뤘던 와 비슷한 hook 이다. 는 특정 결과값을 재사용 할 때 사용하는 반면, 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 이전에 App.js에서 구현했었던 , , , , 함수를 확인해보자. 이 함수들은 컴포넌트가

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

React Hook

공식 문서를 읽고 정리한 내용 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있음. 즉 여러 컴포넌트들에서 반복되는 로직을 훅으로 만든 다음 import 해서 사용할 수 있고 이를 이용해서 독립적인 테

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

useMemo를 사용한 연산한 값 재사용

성능 최적화를 위하여 연산된 값을 useMemo 라는 hook 을 사용하여 재사용하는 방법을 알아보도록 하자.App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서 active 값이 true 인 사용자의 수를 세어서 화면에 렌더링이 되도록

2021년 9월 26일
·
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

Hook(3): useRef

자바스크립트에서 특정 DOM을 선택해야할 때는 DOM Selector를 사용한다. 리액트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야 한다거나 특정 DOM을 선택해야 할 상황이 있 다. 이런 경우, 리액트 함수형 컴포넌트에서는 react hook 중 하나

2021년 9월 20일
·
0개의 댓글
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개의 댓글
post-thumbnail

React Hooks, useRef()에 대한 정리

useRef는 함수형 컴포넌트에서 DOM node에 직접적인 접근을 가능하게 해주는 Hook이다.클래스형 컴포넌트에서는 createRef를 사용한다.예를 들어서, 페이지가 처음 로드됐을 때 input에 포커스를 줄 수 있다. 아래 코드는 input 태그만 화면에 띄우는

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

Hook 사용예제: usePreventLeave

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

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