[리액트문서보기][API참고] Hook의 개요, Hook의 규칙

◼ HOOK 이란? 

Hook은 React 버전 16.8부터(2019년) React 요소로 새로 추가되었습니다. 

 

React Hook은 함수 컴포넌트에서 React의 기능을 사용할 수 있게 해주는 함수입니다. 함수 컴포넌트에서 클래스 컴포넌트의 기능과 유사한 기능들을 사용할 수 있도록 도와주는 도구입니다. 이전에는 클래스 컴포넌트에서만 가능했던 상태(state) 관리, 생명주기 메서드 사용, 그 외의 다양한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 해줍니다.

React Hook은 함수 컴포넌트 내에서만 사용됩니다. 주요한 몇 가지 Hook으로는 useState, useEffect, useContext 등이 있으며, 각각 상태 관리, 부수 효과 처리, 컨텍스트(context) 사용 등을 담당합니다.

함수 컴포넌트에서 Hook을 사용하면 클래스 컴포넌트에서의 복잡한 작업들을 더 간단하게 처리할 수 있습니다. 또한 코드를 더 읽기 쉽고 이해하기 쉽게 만들어 줍니다. 

 

 

---

 

 

◼ React HOOK 이란? 

• useState: 함수 컴포넌트에서 상태(state)를 관리하기 위해 사용됩니다. useState 훅은 컴포넌트 내에서 상태 변수와 해당 변수를 갱신하는 함수를 제공하여 상태를 간편하게 관리할 수 있도록 해줍니다.
• useEffect: 부수 효과(side effect)를 처리하기 위해 사용됩니다. useEffect 훅을 사용하면 컴포넌트가 렌더링될 때마다 실행되는 코드 블록을 정의할 수 있습니다. 주로 데이터 가져오기, 구독 설정, 이벤트 리스너 등을 처리할 때 사용됩니다.
• useContext: 컨텍스트(context)를 사용하기 위해 사용됩니다. useContext 훅은 React 컨텍스트를 편리하게 사용할 수 있도록 해줍니다. 주로 전역 상태나 설정 정보에 접근할 때 사용됩니다.
• useReducer: 복잡한 상태 관리를 위해 사용됩니다. useReducer 훅은 Redux와 비슷한 방식으로 동작하여 상태와 상태를 갱신하는 함수를 결합하여 사용합니다. 주로 상태가 복잡하고 다양한 액션을 처리해야 할 때 사용됩니다.
• useCallback: 콜백 함수를 캐싱하기 위해 사용됩니다. useCallback 훅을 사용하면 렌더링 시마다 함수가 재생성되지 않고 이전에 생성된 함수를 재사용할 수 있습니다. 이는 성능 최적화에 도움이 됩니다.
• useMemo: 값의 메모이제이션을 위해 사용됩니다. useMemo 훅을 사용하면 계산 비용이 많은 연산의 결과를 캐싱하여 성능을 최적화할 수 있습니다.
• useRef: 참조(reference)를 관리하기 위해 사용됩니다. useRef 훅은 DOM 요소나 다른 값에 대한 참조를 생성하고 유지할 수 있습니다. 주로 DOM 조작이나 애니메이션 등에 사용됩니다.
• useLayoutEffect: 렌더링 후에 동기적으로 작업을 수행하기 위해 사용됩니다. useEffect와 비슷하지만 렌더링 후에 바로 실행되므로 레이아웃 계산에 사용됩니다.

 

 

---

 

 

 

◼ HOOK 규칙 

hook은 JS함수를 사용하여 정의되지만, 호출할 수 있는 위치에 대한 제약이 있는 특수한 유형을 가졌으며, 재사용이 가능한 UI로직입니다.

 

• 최상위에서만 hook을 호출할수 있습니다.
  최상위라고 하면 React 함수 밖의 최상위가 아닌, React 함수 안에서의 최상위를 말합니다.
• 반복문**, 조건문, 중첩 함수 또는 try/ catch/ finally블록 안에 작업하면 안됩니다.(밖에 작업해 주세요)
• React는 Hook 호출의 순서를 기억하기에 값의 변경 여부와 상관없이 hook의 호출 순서가 변경되면 불필요한 리렌더링이 일어납니다. 그래서 훅을 사용할 때는 항상 호출 순서를 일관되게 유지하는 것이 중요합니다.
• React 훅은 커스텀 훅에 사용이 가능합니다. (커스텀 훅에는 다른 커스텀 훅도 사용이 가능합니다)
• 이를 통해 코드의 재사용성을 높이고, 로직을 모듈화하여 관리할 수 있습니다

 

 

---

 

 

◼ 커스텀 훅 주의 사항 

 

1. 훅의 이름을 ‘use’로 시작해야 합니다. 훅으로 인식하기 위함입니다.

 

2. 그리고 로직을 추상화하여 재사용 가능한 형태로 만드는 것을 목적으로 만듭니다.

 

커스텀 훅을 만들 때 주로 사용되는 패턴은 다음과 같습니다:

1. 로직의 추상화: 특정한 로직이나 기능을 커스텀 훅으로 추상화합니다. 예를 들어, 데이터를 가져오는 API 호출이나 특정한 상태를 처리하는 로직을 커스텀 훅으로 만들 수 있습니다.
2. 재사용성 향상: 추상화된 로직을 다른 컴포넌트에서도 재사용할 수 있도록 만듭니다. 이렇게 하면 동일한 로직을 여러 컴포넌트에서 반복해서 작성할 필요가 없어지므로 코드의 중복을 줄일 수 있습니다.
3. 인자 및 반환 값 활용: 커스텀 훅은 필요한 인자를 받아들이고, 해당 로직을 수행한 후 적절한 값을 반환합니다. 이러한 방식으로 커스텀 훅을 사용하는 컴포넌트는 필요한 인자를 전달하고 반환된 값을 활용하여 로직을 수행할 수 있습니다.

예를 들어, 여러 컴포넌트에서 반복적으로 사용되는 로딩 상태 관리 로직을 커스텀 훅으로 추상화할 수 있습니다. 이렇게 하면 각 컴포넌트에서는 단순히 해당 커스텀 훅을 호출하여 로딩 상태를 처리할 수 있으며, 로직의 수정이 필요할 때에도 커스텀 훅만 수정하면 되므로 유지보수가 용이해집니다.

 

요약하자면, 커스텀 훅은 React 컴포넌트에서 자주 사용되는 로직을 추상화하여 재사용 가능한 형태로 만드는 것을 목적으로 하며, 이를 통해 코드의 중복을 줄이고 가독성과 유지보수성을 향상시킵니다.

 

 

 

 

 

[참고]

https://ko.legacy.reactjs.org/docs/hooks-intro.html

https://ko.legacy.reactjs.org/docs/hooks-overview.html

https://ko.legacy.reactjs.org/docs/hooks-intro.html#gatsby-focus-wrapper
https://react.dev/reference/rules/rules-of-hooks