React - (Custom) Hook

React Hooks

- 함수 컴포넌트에서도 클래스처럼 컴포넌트의 기능을 낚아 채듯이 가져와서 사용할 수 있게 해주는 기능.

useState, useRef 와 같은 리액트의 내장함수는 모두 React Hooks.

React Hooks 특징.

a. 조건문, 반복문 내부에서는 호출 불가능.

b. custom hook 을 직접 만들어서 사용 가능.

Hook 과 관련된 3가지 사항

1. hook 은 반드시 함수 컴포넌트이거나 custom hook 내부에서만 호출 가능하다.
2. 조건부에서는 사용될 수 없다.
3. custom book 을 직접 만들어서 사용 가능하다
   -> 작성 방법) 함수 작성 시 반드시 함수명 앞에 접두어 use 를 붙여야 한다.

Hook 활용법

• custom hook 을 통해 컴포넌트 내부에서 반복되는 부분을 hook 을 통해 사용될 수 있도록 분리하기.
• custom hook 은 별도의 Directory 에 hooks 이름의 폴더를 만들어서 관리하는 것이 일반적이다.

Custom Hook

A. 컴포넌트간 로직 공유하기

ex) 네트워크에 크게 의존하는 앱을 개발중, 만약 유저가 앱을 사용하는 동안 네트워크가 갑자기 사라지게 된다면
유저에게 보낼 경고를 만들어야 하는 상황

필요한 요소. (아래 두가지의 요소는 컴포넌트가 네트워크 상태와 동기화 되도록 해야 한다.)
1. 네트워크가 온라인 상태인지 아닌지 추적하는 하나의 state
2. 전역 online, offline 이벤트를 구독하고, 이에 맞춰 state 를 업데이트 하는 Effect

Q! 렌더링 중에 호출되는 모든 함수는 항상 use 접두사로 시작해야 되는가 ?
A. Nope. Hook 을 호출하지 않는 함수는 Hook 일 필요가 없다.
함수가 어떤 Hook도 호출하지 않는다면, use를 이름앞에 적는 행위는 피해야한다.

Hook 을 사용하지 않는 Hook, 또는 일반함수는 use 대신 get 을 사용하는 것이 바람직

// 1. 안좋은 예시 : Hook 을 사용하고 있지 않은 Hook
function useSorted(items) {
	return items.slice().sort();
}

// 2. 좋은 예시 : Hook 을 사용하지 않는 일반 함수 
function getSorted(items) {
	return items.slice().sort();
}

Custom Hook 장점

custom hook 을 추출한다는 것은 데이터의 흐름을 명확하게 해준다.