React custom hook을 잘 만들고 싶어서 hook의 특징을 알아보았다.

경력의 대부분을 Vue로 보내다가 react 잠깐 react Native 잠깐 발을 담구었던 나는 리액트에 대해서 아직 모르는게 한 가득이다. 그 중 리액트의 꽃(내 마음대로)인 Hook. 커스텀 훅을 작성하여야 하는데, hook을 Hook답게 사용하는 방법에 대하여 궁금해졌다. 참고로 나는 리액트도 뷰처럼 쓰는 것 같다ㅠㅠ

 

✔️ Hook의 규칙

---

1. 최상위 레벨에서만 호출하기
   hook은 반복문, 조건문 또는 중첩된 함수 내에서 hook 호출이 금지된다. 그래야 컴포넌트가 랜더링 될 때마다 동일한 순서로 Hook이 호출되는 것을 보장할 수 있다.
2. React 함수 내에서 호출하기
   JS 함수 내에서 호출은 불가하다.

 

✔️ Hook의 특징

---

1. 함수 앞에 use를 붙인다.
2. JSX가 아닌 [] 혹은 {}의 형식으로 return한다.
3. 초기값을 넘겨주는 것이 일반적이다.
4. 컴포넌트의 추가 없이 재사용을 가능하게 해준다.
5. 중복을 줄이고, 코드의 재 사용성을 높여 보다 효율적인 관리가 가능하다.
6. 각각의 컴포넌트에서 독립적인 상태를 가진다.

 

use는 주로 input 관리 혹은 fetch 요청 시 많이 사용하고, 그 외 중복적인 부분에서도 많이 사용이 된다.