[React] Custom Hooks

Custom Hooks 1

아래와 같이 리액트 hook에 로직들을 추가해서 만든 함수가 커스텀 hook이다.

다른 함수처럼 reusing logic이 핵심이고 간단한 커스텀 hook 예시는 아래와 같다.

 

 

함수 이름에 use를 붙여야지 리액트가 해당 함수가 hook임을 인지해 내부에서 리액트 hooks가 사용 가능하게 된다.

아니면 안돌아간다. 파일이름은 상관 없다.

 

또한, 해당 hook이 hook 사용 규칙을 위반했을 때 경고가 뜬다.

 

Hook 사용 규칙

1. 반복문, 조건문, 내부함수에서 호출하지 말 것

2. React 컴포넌트 내부에서만 호출할 것

 

커스텀 hook의 사용은 함수처럼 다른 컴포넌트에서 그냥 가져다 쓰면 된다.

 

 

 

이때 커스텀 hook에서 state를 생성한다고해서 해당 훅을 사용하는 모든 컴포넌트가 같은 state를 공유하는 것이 아니다.

각 컴포넌트마다 state가 생성된다.

 

Custom Hooks 2

커스텀 hook의 또다른 예시이다. 간단하게 요청을 보내고 응답을 받아오는 훅이다.

요청의 진행상황과 에러유무를 state로 관리한다.

 

 

useHttp는 두개의 states와 함수를 반환한다.

 

중간에 useCallback의 사용 이유는 useHttp가 호출될 때마다 sendRequest 함수가 재생성되서 다른 컴포넌트들에게 반환되는데 이로 인한 불필요한 재실행을 막기 위함이다. 해당 함수를 useEffect에서 dependacy로 사용중이라 재실행됨.

useHttp는 아래의 컴포넌트에서 사용된다.