리액트 훅
1.Hook(1): useState
기존의 react에서는 functional component에서 state를 사용할 수 없었다. 하지만 v16.8 이후부터 useState라는 함수를 사용하여 functional component에서도 state의 사용이 가능하게 되었다.useState를 호출하면 배열
2.Hook(2): useEffect
useEffect는 componentDidMount와 componentDidUpdate, componentWillUnmount기능을 할 수 있다.useEffect의 기본 템플릿은 다음과 같으며 useEffect(() => {}, \[]), 두번째 인자와 첫번째 함수의
3.Hook(3): useRef
자바스크립트에서 특정 DOM을 선택해야할 때는 DOM Selector를 사용한다. 리액트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야 한다거나 특정 DOM을 선택해야 할 상황이 있 다. 이런 경우, 리액트 함수형 컴포넌트에서는 react hook 중 하나
4.함수형 컴포넌트가 두 번 실행되는 이유(Strict Mode)
처음부터 count의 초기값을 동일한 값으로 바꾸려 하면 App함수가 처음부터 호출되지 않는다.(예시)count의 초기값(A)을 (B)로 바꾸면 App함수가 호출되고, (B)를 다시 (B)로 바꾸면 App함수는 호출되지만 state는 바뀌지 않는다(이때 react는 A
5.Custom Hook
컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들어서 input을 관리하는 코드나 fetch기능을 수행하는 코드는 관리할 때마다 거의 비슷한 코드가 반복된다. 따라서 커스텀 훅을 이용해 중복되는 코드를 하나의 로직으로 묶어 언제나 쉽게 import할 수
6.Hook 사용예제: useInput
hook을 이용하여 input창에 값을 입력했을 때 state를 변경해주고 동시에 validator를 이용하여 검증기능을 하는 것을 구현하였다.변수를 객체에 담으면 변수명이 key로 변수의 값이 value로 들어간다.
7.Hook 사용예제: useTabs + 함수형 컴포넌트의 event 처리
+(함수형 컴포넌트의 event를 처리할 때 함수를 호출하는 경우). Tab창을 구현하는 커스텀 훅을 구현해보았다.객체를 return 했을 때 { currentItem, changeItem } = useTabs(1, content); 이것처럼 객체안의 값들을 바로 쓸
8.Hook 사용예제: useTtile, useConfirm
useTitle title을 변경하는 기능을 구현하였다. (5초 뒤에 title이 "Home"으로 변경됨) before after useConfirm 사용자가 어떤 행동을 하기 전에 확인하는 기능을 구현하였다. useState와 useEffect를 사용하지 않
9.Hook 사용예제: usePreventLeave
창을 닫거나 새로고침 하는 등, "beforeunload"이벤트가 발생했을 때 재확인하는 기능을 구현하였다.event속성인 returnValue는 이 이벤트에 대한 기본 작업이 금지되었는지 여부를 나타낸다. 기본적으로 true로 설정되어 있다. "beforeunload
10.Hook 사용예제: useBeforeLeave
마우스가 화면을 벗어났을 때 실행되는 기능을 구현하였다.화면을 벗어났을 때 이벤트 핸들러인 handle함수를 통해 onBefore함수가 호출되는 것을 알 수 있다.
11.Hook 사용예제: useFadeIn, useNetwork
useRef훅을 이용하여 element를 참조하고 fade와 delay기능을 구현하였다.opacity와 delay가 각각 (1,2) (5,10)로 적용된 것을 알 수 있다.
12.Hook 사용예제: useScroll, useFullScreen
스크롤을 사용할 때 현재 위치한 x, y좌표값에 따라 색상이 바뀌는 기능을 구현하였다.
13.Hook 사용예제: useNotification
Notifications Api를 사용하여 사용자에게 데스크톱 알림을 보여주는 기능을 구현하였다.fireNotif함수를 실행하면 알림을 보낼 수 있는지 먼저 Notification.permission을 통해 확인한다. 만약 permission이 "granted"라면 설
14.useHistory -> useNavigate 업그레이드
변경 전 변경 후