# hook
useCallback
useCallback은 콜백 함수를 기억해야 할때 쓰입니다.위에 코드를 간단하게 보면 App컴포넌트는 ChildComponent와 DummyComponent를 자식 컴포넌트로 가지고 있고 ChildComponent에게는 콜백함수 와 state를 전달해주고 DummyCo
useMemo && React.memo
자신의 상태가 변경될때부모로 부터 받은 props가 변경될때부모의 상태가 변경될때이런식으로 부모 컴포넌트가 자식 컴포넌트에게 연산이 큰 props와 변화가 잦은 props 두가지를 전달한다고 했을때 변화가 잦은 props가 변할때마다 자식 컴포넌트는 다시 렌더링이 된다
useRef
useRef의 기본적인 기능은 고유의 값을 저장하는 것이다. 만약 태그에 사용된다면 해당 엘리먼트를 참조할수 있다. 인자로 받는 값은 useState와 동일하게 초기값이다.useRef는 React내부에서 생성된 객체이며 해당 객체는 값을 저장하는 것이 아니라 특정 메모
useEffect 와 Hook
useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use
useState
useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use
항해 3기 3주차 WIL
시간이 쏜살같다. 99일중에서 21일이 지난 시점에서 무엇을 공부하였는지 메모를 남겨보려고 한다. Life Cycle에 대하여 항해 99는 기본적으로 스파르타코딩클럽에서 제공하는 강의 상품들을 참가자에게 제공하는 시스템으로 이루어져있다. 강의를 수강하는 것은 자유나, 적어도 이부분은 들어야 한다고 리미트를 정해주는 식이다. 나는 자바스크립트 관련 강의를 ...
Context API 를 사용한 전역 값 관리
아래 코드를 보면 App 컴포넌트에서 , , 가 구현되어 있고, 이 함수들은 UserList 컴포넌트를 거쳐 각 User 컴포넌트들에게 전달되고 있다. 여기서 UserList 컴포넌트의 경우, 해당 함수들을 직접 사용하지 않고 함수들을 전달하기 위한 중간다리 역할만
useReducer 를 사용하여 상태 업데이트 로직 분리
상태를 관리할 때 말고도 다른 방법이 있다. 바로 를 사용하는 것이다. 이 hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 다른 파일에 작성 후 불러와서 사용할 수도
useCallback 을 사용한 함수 재사용
은 지난 글에서 다뤘던 와 비슷한 hook 이다. 는 특정 결과값을 재사용 할 때 사용하는 반면, 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 이전에 App.js에서 구현했었던 , , , , 함수를 확인해보자. 이 함수들은 컴포넌트가
React Hook
공식 문서를 읽고 정리한 내용 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있음. 즉 여러 컴포넌트들에서 반복되는 로직을 훅으로 만든 다음 import 해서 사용할 수 있고 이를 이용해서 독립적인 테
useMemo를 사용한 연산한 값 재사용
성능 최적화를 위하여 연산된 값을 useMemo 라는 hook 을 사용하여 재사용하는 방법을 알아보도록 하자.App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서 active 값이 true 인 사용자의 수를 세어서 화면에 렌더링이 되도록
Hook 사용예제: useNotification
Notifications Api를 사용하여 사용자에게 데스크톱 알림을 보여주는 기능을 구현하였다.fireNotif함수를 실행하면 알림을 보낼 수 있는지 먼저 Notification.permission을 통해 확인한다. 만약 permission이 "granted"라면 설
Hook 사용예제: useScroll, useFullScreen
스크롤을 사용할 때 현재 위치한 x, y좌표값에 따라 색상이 바뀌는 기능을 구현하였다.
Hook(3): useRef
자바스크립트에서 특정 DOM을 선택해야할 때는 DOM Selector를 사용한다. 리액트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야 한다거나 특정 DOM을 선택해야 할 상황이 있 다. 이런 경우, 리액트 함수형 컴포넌트에서는 react hook 중 하나
Hook 사용예제: useFadeIn, useNetwork
useRef훅을 이용하여 element를 참조하고 fade와 delay기능을 구현하였다.opacity와 delay가 각각 (1,2) (5,10)로 적용된 것을 알 수 있다.
Hook 사용예제: useBeforeLeave
마우스가 화면을 벗어났을 때 실행되는 기능을 구현하였다.화면을 벗어났을 때 이벤트 핸들러인 handle함수를 통해 onBefore함수가 호출되는 것을 알 수 있다.
React Hooks, useRef()에 대한 정리
useRef는 함수형 컴포넌트에서 DOM node에 직접적인 접근을 가능하게 해주는 Hook이다.클래스형 컴포넌트에서는 createRef를 사용한다.예를 들어서, 페이지가 처음 로드됐을 때 input에 포커스를 줄 수 있다. 아래 코드는 input 태그만 화면에 띄우는
Hook 사용예제: usePreventLeave
창을 닫거나 새로고침 하는 등, "beforeunload"이벤트가 발생했을 때 재확인하는 기능을 구현하였다.event속성인 returnValue는 이 이벤트에 대한 기본 작업이 금지되었는지 여부를 나타낸다. 기본적으로 true로 설정되어 있다. "beforeunload