리액트 공부하기 - Custom Hooks. 내가 직접 정의 하는 나만의 훅!

 

힘차게 으랏샤샤샤 !

 

...... ^__ㅠ

---

🍈 custom hook ?

→ 기존 내장 훅 외에도, 내가 원하는 기능을 내 마음대로 코드 쳐서 만들 수 있을 수 있다.

 

코드를 짜다보면, 생각보다 중복코드도 많아지고, 그에 따라 가독성이 떨어질 수 있는데..

 

내가 직접 정의 해서 만든, custom hook을 사용하면 

중복 코드는 ↓ 재사용성은↑ 그에 따라, 코드 가독성은↑, 유지 보수도 쉬워진다!

 

자주 쓰는 로직을 재 사용할 때 정말 좋다.

---

🍈  기본 문법 

→ custom hook을 만드는 법은 어렵지 않다. 여느 내장 훅 처럼 use를 사용하면 된다 ! 

 

 

▾기본 문법▾

function useMyHook() {
  // 훅 로직 작성 (예: useState, useEffect 등)
  return 값 또는 함수;
}

 

- 이름은 꼭 use로 시작해야 React가 이걸 훅이라고 인식해.

- 커스텀 훅 안에서도 다른 훅을 자유롭게 사용할 수 있다.

---

 

 

주 의

❶ custom hook이 다른 훅 이나 상태에 의존할 경우,

    의존성 배열을 올바르게 설정하여 해당 hook이 다시 렌더링 되는 조건을 명시적으로 지정해야 합니다.

❷ 컴포넌트가 아니라 함수!

 

---

출처 : 챗지피티, 오즈코딩스쿨 학습자료